vue调用高德地图实现导航,vue加载地图
要将地图添加到网页中，我建议您使用高德地图的JSAPI。下面主要介绍在VUE项目中调用高德地图的相关信息，通过示例代码进行详细介绍。有需要的朋友可以参考一下。
目录
前言应用：高德重点技术选型前期工作项目中页面刷新，地图加载偶尔失败。当插件被绑定时，控制台报告一个错误a[d]。拆分不是函数原生调用高德API混合使用(vue-amap混合原生API)摘要参考链接
前言
相信大家都或多或少接触过大屏项目。在大屏项目中，除了echarts中的行政地图，街道地图也很常见。今天我主要讲一下在vue中调用高德地图遇到的一些问题。
申请高德key
不管怎么叫高德地图，都需要在高德地图开放平台申请key。
注册账号可以根据实际情况填写进入高德地图开发平台。(可以选择个人进行实名认证。如果是企业级项目，可能会涉及人员变动。建议使用公司邮箱注册。)区别如下。
新建应用时，可以随意填写名称和类型，尽量一直填写开发的应用，方便后期维护。
成功创建应用程序后，单击添加将要求我们选择使用高德地图所需的服务。不同的服务平台有不同的内容需要填写，比如安卓的app包名，安卓的SHA1码等。因为我这次的项目是大屏项目，所以选择了Web端(JSAPI)。
填写完信息后，当前应用中会生成相应的键值和安全密钥(安全密钥在之前的版本中是没有的)。
技术选型
vue-amap
Vue-amap是一个基于Vue 2.x和高德的地图组件。它提供了一些基本的和高级的功能，如地图绑定、信息表单、搜索组件、类型插件等。我们不需要造轮子，所以我们试一试。
准备工作
我们使用组件的时候都是先看文档，但是我看文档的时候发现文档里只有对应的API没有例子，很难下手，所以我在issues里找到了答案。
解决方法也很简单。
在本地下载项目。
修改src/docs/index.html中的docsify引用将
script src=//un pkg . com/docsify/lib/docsify . min . js /script
修改为
script src=//un pkg . com/docsify @ 4 . 11 . 6/lib/docsify . min . js /script
执行npm安装npm启动。默认情况下，项目将在端口4201上启动，您可以看到项目示例。
项目中应用
安装npm安装vue-AMAP-保存
Mount vue-amap从main.js中的 vue-amap 导入vue amap
vue . use(VueAMap)；
VueAMap.initAMapApiLoader({
//https://lbs.amap.com/，应用地址，选择web端jsAPI。
Key:“本人申请的高德地图key”，
//插件集合，随便用什么插件。
插件：[AMap。自动完成，地图。PlaceSearch ， AMap。比例尺，地图。概述， AMap。工具栏， AMap。MapType ， AMap。多编辑者，地图。CircleEditor]，
V: 1.4.4 ，//高德sdk版本，最新的sdk已经发布到2.0。
//官网解释：JSAPI 2.0提供的开发接口99%兼容1.4版本，但我们还是选择1.4.4来保证插件的稳定性。
})
组件使用模板
El-AMAP ref= map vid= AMAP demo :center= center :zoom= zoom :events= events class= AMAP-demo
/el-amap
/模板
脚本
//建议在配置文件中写缩放、居中等可配置项，方便打包后修改。
模块.导出={
数据：函数(){
返回{
变焦：12，
中心：[121.59996，31.197646]，
事件：{
单击:(e)={
警报(“地图已单击”)；
}
},
};
},
};
/脚本
以上就是在某视频剪辑软件项目中使用vue-amap调用高德地图美国石油学会(美国石油协会)的基本使用，具体对地图的操作可以根据文档的规范来就可以了，在使用的过程中可能会遇到几个问题。
刷新页面，地图加载偶尔失败
在主页。射流研究…中加入以下内容。//解决地图刷新显示不出来
const amapKeys=object。密钥(本地存储).过滤器（键=key.match(/^_AMap_/))
amapKeys.forEach(key={
//console.log(key)
localStorage.removeItem(key)
})
在绑定插件的时候，控制台报错 a[d].split is not a function
含有地图组件的路由不使用懒加载的方式（临时方案)
注：vue-amap是不支持vue3.x，并且不能绑定高德地图新版美国石油学会(美国石油协会)对应的安全密钥jscode，可能会导致部分服务无法使用。对应的vue3版本的插件看这里。
原生调用高德API
安装官方提供的加载器NPM安装@ AMAP/AMAP
主页。射流研究…中绑定安全密钥jscode(不绑定部分功能无法使用)//该写法只推荐在开发阶段，如果在生产阶段建议采用反向代理
//官网说明https://lbs.amap.com/api/javascript-api/guide/abc/prepare
窗户. AMapSecurityConfig={
securityJsCode: jscode //输入你的代码
}
封装组件模板
div class=home_div
div id=容器/div
/div
/模板
脚本
从" @amap/amap-jsapi-loader "导入AMapLoader
导出默认值{
名称：地图视图，
data() {
返回{
地图：空，
}
},
已创建(){
},
已安装(){
这个。初始化AMAP()；
},
方法：{
initAMap() {
AMapLoader.load({
键： xxx ，//设置您的键
版本："2.0",//高德地图版本
插件：[AMap .工具栏，地图.驾驶],//插件
阿马普伊：{ //高德地图用户界面组件库，可不写，内部提供了覆盖物标注点，以及部分模块的封装
版本："1.1",
插件：[],
},
Loca: { //Loca版本（高性能地图数据可视化库)可不写
版本："2.0"
},
}).然后((AMap)={
//容器渲染的编号
this.map=新地图。地图(容器,{
缩放：5,//当前缩放级别
缩放：[2,22],//缩放级别范围
中心：[105.602725,37.076636],//中心点
});
}).catch(e={
控制台。日志(e)；
})
},
}
}
/脚本
样式范围。home_div {
填充：0px
边距：0px
宽度：100%;
身高：100%;
位置：相对；
}
#容器{
填充：0px
边距：0px
宽度：100%;
身高：100%;
位置：绝对；
}
/风格
混合使用（vue-amap与原生API混合使用）
只想通过vue-amap引入高德地图，而部分实例化的操作直接基于高德地图的软件开发工具包完成实例化操作不是加载地图，简单来说就是用一些属性去实例化地图的这个类新xxx()代表的就是实例化xxx。这样就不需要在使用埃尔-阿马普中的中心属性和嗡嗡声属性了，因为已经通过原生的方式进行实例化了。
从" vue-amap "导入{ lazymapapiloaderinstance }；
lazyAMapApiLoaderInstance.load().然后(()={
//您的代码.
this.map=新地图。地图( amapContainer ，{
中心：新地图。英格拉特(121.59996,31.197646)
});
});
在vue-amap中引入高德原生软件开发工具包(软件开发工具包)只需在埃尔-阿马普上绑定地图管理器就可以拿到高德原生地图.地图实例文档地址模板
div class=地图页面容器
埃尔AMAP视频= AMAP演示:中心=中心:AMAP经理= AMAP经理:缩放=缩放
地图演示
/el-amap
div class=工具栏
button @click=add()添加标记/按钮
/div
/div
/模板
风格。地图演示{
身高：300px！重要；
}
/风格
脚本
//NPM方式
从" vue-amap "导入{ AMAP经理}；
让AMAP经理=新AMAP经理()；
导出默认值{
数据：函数(){
返回{
变焦：12,
中心：[121.59996,31.197646],
amapManager，
};
},
方法：{
add() {
设o=AMAP manager . get map()；
让marker=新地图。标记({
位置：[121.59996，31.177646]
});
marker . set map(o)；
}
}
};
/脚本
总结
网上也有很多高德地图的通话方案，我也是刚刚接触。本文观点为本人观点，最后说说自己对选图的判断。
如果是大屏项目，只是简单的搭配，没有太多的互动。建议使用vue-amap为了展示。如果是以地图为中心的项目，包括人的路线、轨迹等复杂交互，建议使用native。
参考链接
高德地图API
vue-amap
这就是这篇关于VUE项目呼叫高德地图的文章。有关VUE呼叫高德地图的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。