vue使用高德地图根据城市名定位到地图上，并且点击出现消息弹窗体

vue使用高德地图根据城市名定位到地图上，并且点击出现消息弹窗体

效果图：

因为我们要根据城市名进行定位，所以要在引入的map插件后面加上
&plugin=AMap.DistrictSearch行政区搜索：

第一步：在index.html页面上引入下载的文件，这里的key需要你自己去高德地图上注册获取

 <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=**这里的key去高德注册**&plugin=AMap.DistrictSearch"></script> 

第二部：父组件中的代码

//引入map子组件
<Map :map-value="mapValue" v-if="mapValue.length>0"/>

<script>
import Map from '@/components/map_com'
export default {
	components: {
    Map,
 },
 data(){
  return{
    mapValue:[
      {
      	provinceName: "安徽省",
      	totalDeptNum：3,
      	workingDeptNum:1,
      	stopDeptNum:1,
      	finishDeptNum :2
      },
     {
      	provinceName: "北京",
      	totalDeptNum：3,
      	workingDeptNum:1,
      	stopDeptNum:1,
      	finishDeptNum :2
      },
    ]
  }
}

</script>

第三部：子组件代码

<template>
  <div id="app">
    <!-- <router-view /> -->
    <!-- <ExportWord></ExportWord> -->
    <div id="container" />
  </div>
</template>

<script>
// import AMap from 'vue-amap';
export default {
  name: 'App',
  components: {
    // FromCom

  },
  props: ['mapValue'],
  data() {
    return {
      map: null,
    }
  },
  mounted() {
    const _t = this
    this.map = new AMap.Map('container', {
      // 地图的缩放级别
      zoom: 5, // 级别
      center: [105, 35.319524], // 中心点坐标
      viewMode: '3D', // 使用3D视图
      mapStyle: 'amap://styles/6e156fccbae213b2cd402958ff4ff01b' // 设置地图的显示样式
    })

    // 地图操作工具条插件。可支持方向导航、位置定位、视野级别缩放、视野级别选择等操作。
    this.map.plugin(['AMap.ToolBar', 'AMap.Scale'], function() {
      // 加载工具条
      // var tool = new AMap.ToolBar({
      //   position:'RB'
      // });
      // _t.map.addControl(tool);
      // var scale = new AMap.Scale();
      // _t.map.addControl(scale);
    })

    this.mapAdd(this.mapValue)
  },
  methods: {
    // 添加标点
    mapAdd(markerList) {
      const _t = this

       var opts = {
            subdistrict: 0,   //获取边界不需要返回下级行政区
            extensions: 'all',  //返回行政区边界坐标组等具体信息
            // level: 'city'  //查询行政级别为 市
        };
        var district = null
        //加载行政区划插件
        if(!district){
            //实例化DistrictSearch
          district = new AMap.DistrictSearch(opts);
        }
        //行政区查询
        let cityCenter = ''
        console.log(markerList)
        markerList.forEach((item,index)=>{
          district.search(item.provinceName, function(status, result) {
            cityCenter = [result.districtList[0].center.lng,result.districtList[0].center.lat]
            var marker = new AMap.Marker({
            position: cityCenter,
            offset: new AMap.Pixel(-12,-12),
            zIndex: 101,
            map: _t.map,
            content:`<div class='info' >${item.totalDeptNum}</div>`,
            anchor: 'top-right',
            // 数据传递
            extData: item
          });
          _t.map.add(marker)
          
           // console.log(marker.getExtData())(marker,element)
          marker.on('click', _t.onMarkerClick)// 绑定click事件
          })
        })     
    },
    onMarkerClick(e) {
      const markerValue = e.target.getExtData()
      
      // console.log(e.originEvent.path)
      // console.log(JSON.parse(e.originEvent.path[0].dataset.mapvalue))
      const _t = this
      // 信息窗体的内容
      var content = `
            ${markerValue.provinceName}
            <hr>
            项目总数：<span class='zong'>${markerValue.totalDeptNum ?? 0}</span><br>
            在建项目总数：<span class='zaiZhi'>${markerValue.workingDeptNum ?? 0}</span><br>
            停工项目总数：<span class='zaiChang'>${markerValue.stopDeptNum ?? 0}</span><br>
            竣工项目总数：<span class='zaiChang'>${markerValue.finishDeptNum ?? 0}</span><br>
        `
        
      var infoWindow = new AMap.InfoWindow({ // 创建信息窗体
        content: content, // 信息窗体的内容可以是任意html片段
        // 信息弹窗相对位置
        offset: new AMap.Pixel(0, -45)
      })
      infoWindow.open(_t.map, e.target.getPosition())// 打开信息窗体
      // e.target就是被点击的Marker
    }
  }
}
</script>

<style lang="scss">
#container {width:100%; height: 100%; }
.amap-marker-label{
  background: transparent;
  border: none;
  color: white;
  font-size: 18px;
}
.info::before,.amap-marker-label::after,.amap-marker-label::before{
  content:' ';
  position: absolute;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background-color: rgb(55, 148, 255);
  z-index: -1;
}
.amap-marker-label::before{
  width: 60px;
  height: 60px;
  background-color: rgba(55, 148, 255,0.5);
}
.info::before{
  width: 60px;
  height: 60px;
  background-color: rgba(55, 148, 255,0.5);
  animation: loading 2s ease-in-out infinite;
}

@keyframes loading{
	0%{
		/* transform: scaleY(0.1); */
    width: 10px;
    height: 10px;
		background: rgba(55, 148, 255,0.5);
	}50%{
		/* transform: scaleY(1); */
		background: rgba(135, 191, 255, 0.5);
	}100%{
		/* transform: scaleY(0.1); */
    width: 70px;
    height: 70px;
		background: transparent;/* 背景透明。实际上background默认的颜色就是透明的属性 */
	}
}

.amap-info-content.amap-info-outer{
  background-color: rgba(55, 148, 255, 0.836);
  color: white;
  padding: 10px 20px;

}
.bottom-center .amap-info-sharp{
  border-top: 8px solid rgba(55, 148, 255, 0.836);
}
.zong{
  color: chartreuse;
}
.zaiZhi{
  color: rgb(255, 230, 0);
}
.zaiChang{
  color: rgb(255, 115, 0);
}
</style>

注意一点：从父组件传值到子组件的时候要加上判断v-if:"{{mapValue.length>0}}",不然会出现数据没加载完成子组件就渲染好，导致数据传过去的是空