vue 高德地图

在public里的index.html里引入

 <!-- 高德地图 -->
       <link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css"/>
       <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=申请的key值&plugin=AMap.Autocomplete,AMap.PlaceSearch,AMap.MouseTool,AMap.Geocoder"></script>

引入前把vue.config.js文件添加
// vue.config.js
module.exports = {
  configureWebpack: {
    externals: {
      'AMap': 'AMap'
    }
  }
}
在什么什么.vue里应用
 <div id="container"  style="" class="map"></div>
        </div>



引入 import AMap from 'AMap'


data里面添加
  //地图
        lnglats: [],
        list: [],
        map: null,
        infoWindow: '',
        logMapinfo:'',
        zoom:'',
        marker: '',
        visible: false,
//watch 监控鼠标缩放
 watch:{
      zoom(e){
        if(e<11){
            this.visibleShows = false
         }else{
             this.visibleShows = true
         }
      }
    },

//methods里的函数
//没数据的时候初始定位
  getCurrentPos() {
        AMap.plugin('AMap.Geolocation', () => {
          var geolocation = new AMap.Geolocation({
            enableHighAccuracy: true, // 是否使用高精度定位，默认:true
            timeout: 10000, // 超过10秒后停止定位，默认：5s
            // buttonPosition: 'RB', // 定位按钮的停靠位置
            // buttonOffset: new AMap.Pixel(10, 20), // 定位按钮与设置的停靠位置的偏移量，默            认：Pixel(10, 20)
            zoomToAccuracy: true, // 定位成功后是否自动调整地图视野到定位点
          })
          this.map.addControl(geolocation)
          geolocation.getCurrentPosition((status, result) => {
            if (status === 'complete') {
              this.pcd.province = result.addressComponent.province
              this.pcd.city = result.addressComponent.city
              this.companyXingzheng()
            }
          })
        })
      },
//这个接口是获取经纬度的  可以换成你们的 请求参数不一样我们可能
      companyXingzheng() {
        let province = this.pcd.province
        let city = this.pcd.city
        let looper = {
          province: province != "省" ? province : '', // 省
          city: city != "市" ? city : '' // 市
        }

        this.$api.companyXingzheng(looper)
          .then((res) => {
            this.lnglats = []
            if (res.code == 1) {
              if (JSON.stringify(res.data) !== "{}") {
                res.data.map((item) => {
                  this.lnglats.push([item.location.lng, item.location.lat])
                })
                this.list = res.data
                this.Maplable()
              } else {
                this.$message.error('该区域暂无数据');
                this.visibleShows = false
              }
            }
          })
      },

//初始渲染图像
      Maplable() {
        // 初始化地图对象，加载地图

        this.map = new AMap.Map('container', {
          zoom: 18,
        })
       var marker=''
            this.logMapinfo = function (){
              this.zoom =   this.map.getZoom(); //获取当前地图级别
     
           };
            this.logMapinfo();
       
           this.zoomOn()
               this.map.on('click', function(e) {
                 console.log(e)
               });
           // 给按钮绑定事件
        // 初始化信息窗口
        // this.infoWindow = new AMap.InfoWindow({
        //   offset: new AMap.Pixel(0, -30)
        // })
         // 循环遍历
              for (var i = 0; i < this.lnglats.length; i++) {
              
             this.marker = new AMap.Marker({
                position: this.lnglats[i],
                content: ` 
                      <div style="    
                        font-size: 12px;
                        color: #fff;
                        text-align: center;
                        pointer-events: none;
                        width: 80px;
                        height: 80px;
                        border-radius: 50%;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        line-height: 17px;
                        background: #13c2c2;
                        opacity: .9;
                        border: 1px solid #009b9b;">${this.list[i].title}<span > 约        ${this.list[i].num.toLocaleString()}条</span></div>
                  `,
                  icon:null,
                  zoom: 8,
                map: this.map,
                
              })
              // this.marker = new AMap.Marker({
              //     position: this.lnglats[i],
              //     content: ``,
              //     icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
              //     map: this.map
              //   })
                this.marker.on('click', this.markerClick)
                this.marker.emit('click', {
                  target: this.marker
                })
                // 点击事件
                this.map.setFitView()
              }
    
      },


      markerClick() {
        this.visibleShows = false
        setTimeout(() => {
          this.visibleShows = true
        }, 100)
      },
      
    mapZoomstart(){
          // '缩放开始';
      },
     mapZoom(){
           this.logMapinfo();
          //  '正在缩放';
      },
    mapZoomend(){
          // '缩放结束';
      },
          
      // 事件绑定
   zoomOn(){
           this.map.on('zoomstart', this.mapZoomstart);
           this.map.on('zoomchange', this.mapZoom);
           this.map.on('zoomend', this.mapZoomend);
      },

地图缩放相关事件-地图事件-示例中心-JS API 2.0 示例 | 高德地图API (amap.com)