vue使用高德地图

1.在下载地图组件

npm install vue-amap --save

2.在main.js中引入

import VueAMap from 'vue-amap'
Vue.use(VueAMap)

VueAMap.initAMapApiLoader({
        key: '你的key值',
        plugin: ["AMap.Geolocation","AMap.CircleEditor","AMap.MarkerClusterer","MarkerClusterer",'AMap.Map'],
        v: '1.4.4',
});

3.在页面组件中使用

<template>
	<div>
  		<el-amap vid="amapDemo" :amap-manager="amapManager" :center="center" :zoom="zoom" :events="events" class="amap-demo"></el-amap>
  		<el-amap-marker
          v-for="item in district"
          :content="item.contentText"
          :position="item.position"
          :offset="item.offsetText"
          :key="item.id"
        ></el-amap-marker>
 	</div>
</template>

<script>
import { AMapManager, lazyAMapApiLoaderInstance } from "vue-amap";
let amapManager = new AMapManager();
export default {
  data() {
    let self = this;
    return {
      amapManager,
      map: null,   
      zoom: '',  //地图展示大小               
      center: [120.17, 30.25], //地图中心位置
      },
      district：'',//地图上点的数据
       events: {
        //创建地图实例
        init(o) {
          lazyAMapApiLoaderInstance.load().then(() => {
            self.inintMap();
          })
        }
      }
   }
 },
 methods: {
 inintMap() {
      // 回调地图实例
      this.map = amapManager.getMap();
      /**
       *浏览器定位
       */
      var geolocation = new AMap.Geolocation({
        enableHighAccuracy: true, //是否使用高精度定位，默认:true
        timeout: 100, //超过10秒后停止定位，默认：5s
        buttonPosition: "RB", //定位按钮的停靠位置
        buttonOffset: new AMap.Pixel(-100, 110), //定位按钮与设置的停靠位置的偏移量
        zoomToAccuracy: true //定位成功后是否自动调整地图视野到定位点
      });
      this.map.addControl(geolocation);
      geolocation.getCurrentPosition((status, result) => {
        if (status == "complete") {
          this.zoom = 11.5; //地图挂在完成显示大小
          let lng = result.position.lng;
          let lat = result.position.lat;
          this.centerS = [lng, lat];  //定位的位置
        } else {
			//地图创建失败
        }
      });

      //监听地图缩放比例比例 （根据地图大小显示不同点，来创建创建聚合效果）
      this.map.on("zoomend", evt => {
        var offsetPo = this.map.getZoom();
        console.log(offsetPo )  //地图缩放比例比例
      })
    },
    //将数接口的数据挂在地图上
    Dian(){
    	let data = "接口数据"
		 datas.forEach(item => {
              item.position = item.site.split(",");
              item.contentText = ` <div  class="ampss">${item.item_name} </div>`;
              item.events = {
                click: () => this.onAmpAll(item)
              };
	},
	onAmpAll(res) {
	 console.log('点击了')
	}
 }



<style lang="less">
.container {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  /* border: 1px solid #999; */
}
</style>