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

需求说明：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'
       },
   }

三、定位功能实现

import AMap from 'AMap'; //在页面中引入高德地图
methods:{
	//定位
    getLocation() {
        const self = this
        AMap.plugin('AMap.Geolocation', function () {
            var geolocation = new AMap.Geolocation({
                // 是否使用高精度定位，默认：true
                enableHighAccuracy: true,
                // 设置定位超时时间，默认：无穷大
                timeout: 10000,
            })
            //进行IP城市查询
            geolocation.getCityInfo(function(status,result){
               if(status=='complete'){
                   self.cityName = result.city;
                   self.cityCode = result.adcode;
                   console.log(self.cityName,self.cityCode)  
                }else{
                    onError(result)
                } 
            })
            //获取用户当前的精确位置信息(经纬度)
            geolocation.getCurrentPosition(function(status,result){
                if(status=='complete'){
                    self.longitude = result.position.lng;
                    self.latitude = result.position.lat;
                }else{
                    onError(result)
                }
            });
        });
        //定位错误，使用另一方式定位
        function onError(data) {
            self.getLngLatLocation();
        }
    },
    
    getLngLatLocation() {
        let self = this;
        //只获取城市级别的定位信息
        AMap.plugin('AMap.CitySearch', function () {
            var citySearch = new AMap.CitySearch();
            citySearch.getLocalCity(function (status, result) {
                if (status === 'complete' && result.info === 'OK') {
                    // 查询成功，result即为当前所在城市信息
                    console.log('通过ip获取当前城市：', result)
                    self.cityName = result.city;
                    self.cityCode = result.adcode;
                    var lnglat = result.rectangle.split(';')[0].split(',');
                    console.log(lnglat)
                    self.longitude = lnglat[0];
                    self.latitude = lnglat[1];
                    
                    //逆向地理编码查询地理位置详细信息
                     AMap.plugin('AMap.Geocoder', function () {
                         var geocoder = new AMap.Geocoder({
                             // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
                             city: result.adcode
                         })
                         var lnglat = result.rectangle.split(';')[0].split(',');
                         geocoder.getAddress(lnglat, function (status, data) {
                             if (status === 'complete' && data.info === 'OK') {
                                // result为对应的地理位置详细信息
                                console.log(data)
                             }
                         })
                    })
                }else {                    
                }
            })
        })
    }
},
mounted(){
  this.getLocation();
}

四、城市选择器功能实现

官网 https://lbs.amap.com/api/amap-ui/reference-amap-ui/other/mobicitypicker

<template>
    <div id="container" class="mymap"></div>
</template>
<script>
// import AMap from 'AMap'; //在页面中引入高德地图
import AMapUI from "AMapUI"; //在页面中引入组件库

export default {
  data() {
    return {
    };
  },
  mounted() {
    var self = this;
    //设置DomLibrary
    // AMapUI.setDomLibrary(Zepto);
    //加载MobiCityPicker，loadUI的路径参数为模块名中 'ui/' 之后的部分
    AMapUI.loadUI(["misc/MobiCityPicker"], function (MobiCityPicker) {
      var cityPicker = new MobiCityPicker({
        //设置主题（同名的className会被添加到外层容器上）
        theme: "red",
        //topGroups: ..., // 顶部城市列表
      });
      //监听城市选中事件
      cityPicker.on("citySelected", function (cityInfo) {
        cityPicker.hideImmediately();  //立即隐藏
        console.log(cityInfo);        //选中的城市信息
      });
      //显示城市列表，可以用某个click事件触发
      cityPicker.show();
    });
  },
  methods: {},
};
</script>
<style scoped>
.mymap {
  width: 100%;
  height: 100%;
}
</style>

五、城市选择器样式自定义

1. 设置自定义主题

    var cityPicker = new MobiCityPicker({
           //设置主题（同名的className会被添加到外层容器上）
           theme: "red",
   });     

2. 在main.js中引入自定义css

   

   3.自定义样式css需要带上red