Vue使用高德地图选点定位搜索定位功能实现_vue.js_

项目下载：

高德地图测试demo，高德地图测试demo-Node.js文档

效果图：

一、申请高德地图的使用密钥key。

高德开放平台 | 高德地图API

在高德地图控制台里面“我的应用”中创建应用，并添加key就可以拿到密钥key和安全密钥了。

二、安装依赖。

npm install -S vue-amap

三、使用。

main.js引入依赖。

import VueAMap from 'vue-amap' Vue.use(VueAMap); // 初始化vue-amap VueAMap.initAMapApiLoader({ key: '你的key',// 高德的key // 插件集合 plugin: [ 'AMap.CircleEditor',// 圆形编辑器插件 "AMap.Geolocation", // 定位控件，用来获取和展示用户主机所在的经纬度位置 "AMap.Geocoder", // 地理编码与逆地理编码服务，用于地址描述与坐标间的相互转换 "AMap.Autocomplete", "AMap.PlaceSearch", "AMap.CitySearch", ], // 高德 sdk 版本，默认为 1.4.4 v: '1.4.4' }); //高德的安全密钥 window._AMapSecurityConfig = { securityJsCode:'你的安全密钥', }

封装组件：aliMap.vue

使用组件：

四、常见问题。

经常有人说不显示，麻烦自己检查一下控制台报错。

1.css预处理器不一样。

我的代码用的是scss，使用时请根据自己项目使用的情况（scss或less，也可以将css预处理器删除了）进行修改。

2.是否修改成自己的高德地图key？

3.展示地图的dom的容器是否存在大小，是否显示？

4.高德地图依赖是否一致？

第三方依赖经常出现修改api的情况，如果控制台报错的是某个变量函数未定义或找不到，多半是依赖的版本不一致造成的，建议安装指定版本。

5.部分网友还把百度地图和高德地图混入使用。

到此这篇关于Vue使用高德地图选点定位搜索定位的文章就介绍到这了,更多相关vue高德地图定位内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！