前言

最近在vue里使用了高德地图vue-amap以及AMapUI，我在这里就说下如何在vue2里引入vue-amap和AmapUI以及使用定位

（在这里默认你已经安装了vue-cli）

安装

npm install vue-amap --save

在main.js引入vue-amap

在main.js添加如下几行

// 引入vue-amap
import AMap from 'vue-amap';

Vue.use(AMap);
// 初始化vue-amap
AMap.initAMapApiLoader({
    // 申请的高德key
    key: '你的key值',
    // 插件集合
    plugin: ['AMap.Geolocation'，....],
    uiVersion: '1.0'  //添加 uiVersion 的脚本版本号
});

引入高德 UI 组件库，如上，只需在初始化的时候添加 uiVersion 的脚本版本号，就能轻松完成脚本的加载及初始化，版本号参考官方介绍

新建一个map组件

新建一个map.vue文件

<template>
  <div id="near">
    <div id="amap-main">
    </div>
  </div>
</template>
<script>
import { lazyAMapApiLoaderInstance } from 'vue-amap';
var map
export default{
  name:'near',
  data () {
    return {
      localData:{}
    }
  },
  mounted() {
    let self = this
    lazyAMapApiLoaderInstance.load().then(() => {
        //初始化地图
        map = new AMap.Map('amap-main', {
          resizeEnable: true,
          zoom: 20,
          center: new AMap.LngLat(113.309213,23.146569)
        });
            //这个是添加AMapUI的点标注
         AMapUI.loadUI(['overlay/SimpleMarker'], (SimpleMarker) => {
            const marker = new SimpleMarker({
              iconLabel: 'A',
              iconStyle: 'red',
              color:"#fff",
              map: map,
              position: [113.309213,23.146569],
            });
          });
      //使用定位
      map.plugin('AMap.Geolocation', function() {
          let geolocation = new AMap.Geolocation({
              enableHighAccuracy: true,//是否使用高精度定位，默认:true
              timeout: 10000,          //超过10秒后停止定位，默认：无穷大
              buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
              zoomToAccuracy: true,      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
              buttonPosition:'RB'
          });
          map.addControl(geolocation);
          geolocation.getCurrentPosition();
          AMap.event.addListener(geolocation, 'complete', self.onComplete);//返回定位信息
      });
    });
  },
  methods: {
      onComplete (data) {
        //里面为定位的信息
         this.localData = data
      }
  }

}
</script>
<style lang="scss">
#near{
  width:100%;
  height:100%;
  #amap-main{
    width:100%;
    height:100%;
  }
}
</style>

然后引用map.vue组件你就会发现成功出现地图并且有个名字为A的点标注

更多专业前端知识，请上 【猿2048】www.mk2048.com