vue项目中高德地图根据城市名定位到城市中心位置，并在该位置做标记

先看效果：

首先记得引入高德地图，并且要带上&plugin=AMap.DistrictSearch，如下：

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=这里放上你的密钥&plugin=AMap.DistrictSearch"></script> 

这是data：

data(){
  return{
    map:{},
    markers:[],
    tableData3:[
      {cityName: "上海市"},
      {cityName: "信阳市"},
      {cityName: "郑州市"}
    ]
  }
}

methods:

    drawMap() {
      const that = this
       // 普通点
        var normalMarker = new AMap.Marker({
            offset: new AMap.Pixel(0, -40),
        });  
        var icon = new AMap.Icon({
          image: require('../../../../assets/images/map/red-circle.png'),//本地引入图标
          size: new AMap.Size(34, 34), 
          imageSize: new AMap.Size(34, 34),
        });
        var opts = {
            subdistrict: 0,   //获取边界不需要返回下级行政区
            extensions: 'all',  //返回行政区边界坐标组等具体信息
            level: 'city'  //查询行政级别为 市
        };
        var district = null
        //加载行政区划插件
        if(!district){
            //实例化DistrictSearch
          district = new AMap.DistrictSearch(opts);
        }
        let ccenter  
 //这里是把地图默认中心位置选在第一个城市的中心点，如果没这个需要可以删除这一段
        district.search(that.tableData3[0].cityName, function(status, result) {
           ccenter = [result.districtList[0].center.lng,result.districtList[0].center.lat]
           that.map = new AMap.Map('mapContainerbb', {
              mark:{},
              mapStyle: 'amap://styles/darkblue',
              center: ccenter,
              zooms: [4,8],//设置地图级别范围
              zoom: 13
            });
        })

        //行政区查询
        let cityCenter = ''
        that.tableData3.forEach((item,index)=>{
          district.search(item.cityName, function(status, result) {
            cityCenter = [result.districtList[0].center.lng,result.districtList[0].center.lat]
            that.markers[index] = new AMap.Marker({
            icon: icon,
            position: cityCenter,
            offset: new AMap.Pixel(-12,-12),
            zIndex: 101,
            map: that.map,
            anchor: 'top-right'
          });
          })
        })     
    },