vue调用高德地图实现导航,vue3使用高德地图

　　本文主要介绍了利用高德地图实现vue的实时天气预报功能。根据定位功能，Vue使用高德地图定位当前城市的天气预报功能。本文通过示例代码给大家做了非常详细的介绍，有需要的朋友可以参考一下。

JSAPI 的加载

　　JS API 2.0 版本提供了两种方案引入地图 JSAPI：

　　1.使用官网提供的JSAPI加载器加载；

　　2.以常规JavaScript脚本的方式加载；

　　注意：为避免地图数据协议与前端资源不匹配，只允许在线加载JSAPI，禁止本地调用、与其他代码混合打包等。

使用 JSAPI Loader (推荐)

　　JSAPI Loader是我们提供的API Loader，可以帮助开发者快速定位，有效避免JSAPI加载参考图的各种误用。它具有以下特点：

　　我们来解释一下上面这个案例的问题：为什么这个时候图标不能粘性定位？主要是因为它(子元素)不知道那个父元素的滚动会占上风(现在有两个带滚动的父元素)，所以我们要检查祖先元素的层数，看是否有溢出属性。如果有，将元素设置为overflow:visible；body {overflow:可见；};简单理解：如果两个父体和div.main一样高一样宽，子元素不知道父元素是不是主元素，会有粘性定位的支持，可以用两种方式：普通JS和npm包；避免有效错误异步加载导致JSAPI资源加载不完整的问题；错误处理给出了加载JSAPI混合版本的不正确用法；对非法加载引用JSAPI进行了错误处理；指定JSAPI版本；支持插件加载；允许多次加载操作，网络资源不会重复请求，方便大型工程模块的管理；支持IE9以上浏览器，不支持IE8以下浏览器(2021年12月2日你申请后的密钥需要和你的安全密钥一起使用)

JSAPI key和安全密钥的使用

　　JSAPI key搭配代理服务器并携带安全密钥转发（安全）

　　1)在引入JSAPI使用Loader之前，添加代理服务器设置脚本标签，设置代理服务器域名或地址，将下面示例代码中的“您的代理服务器域名或地址”替换为您的代理服务器域名或ip地址，其中_AMapService是代理请求的固定前缀，不能省略或修改。(注意您这个设置必须是在加载loader.js的脚本引入之前进行设置，否则设置无效。）

项目代码步骤：

1、在index.html页面body中添加密钥

　　身体

　　定义在脚本未被执行时的替代内容

　　strongWe很抱歉，没有启用JavaScript，地图演示无法正常工作。请启用它以继续。/strong

　　/noscript

　　div id=app/div

　　脚本类型=文本/javascript

　　窗户。_AMapSecurityConfig={

　　//serviceHost:您的代理服务器域名或地址/_AMapService ，

　　 securityJsCode:

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。