vue高德地图H5定位及城市选择器控件实现详细教程

个人博客地址：https://qingmuzhang.gitee.io/

需求说明：H5实现初始化通过高德地图进行定位城市，用户也可以自行点击选择其他城市

主要功能点：定位、城市选择器

实现效果

一、初始准备

这里采用 高德地图 JS API去实现上述两项功能，使用高德地图 JS API 开发地图应用需要先注册账号并申请Key,https://lbs.amap.com/api/javascript-api/guide/abc/prepare

1. 首先，注册开发者账号，成为高德开放平台开发者，地址 https://console.amap.com/dev/id/choose

这里我选择的个人开发者，只需要手机号认证即可创建，后续有需求可以选择企业开发者。

2. 登陆之后，在进入「应用管理」 页面「创建新应用」
3. 为应用添加 Key，「服务平台」一项选择「 Web 端 ( JSAPI ) 」
   
4. 添加后点击可以查看新生成的key，将其复制添加到项目中
   

二、Vue项目初始配置

1. 在main.html页面添加 JS API 的入口脚本标签，并将其中key值=刚刚申请的 key，由于还使用到高德的城市选择器组件，所以还需要引入ui组件库

   <!--引入高德地图JSAPI -->
   <script src="//webapi.amap.com/maps?v=2.0&key=申请的key"></script>
   <!--引入UI组件库（1.1版本） -->
   <script src="//webapi.amap.com/ui/1.1/main.js"></script>
   

2. 在webpack.base.conf.js中加入

   module.exports = {
        
   	  externals: {
        
           'AMap': 'AMap',
           'AMapUI': 'AMapUI'
       },
   }
   

三、定位功能实现

https://lbs.amap.com/api/javascript-api/reference/location

import AMap from 'AMap'; //在页面中引入高德地图
methods:{
   
	//定位
    getLocation() {
   
        const self = this
        AMap.plugin('AMap.Geolocation', function ()