Vue+高德地图

基于VUE的高德地图展示及标点

功能描述：
在vue框架（vue-cli3）中使用高德地图，展示地图，规划行政区域，标点。

具体步骤：

• 在高德api中申请一个key值 (高德api管网)
  （注意web端和web服务的key的运行功能不一致，需要根据自己项目实际情况而申请相对应的key------我这里需要的key是web端的key值）
  
• 在public中的index.HTML文件中加入相关配置

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=***********"></script>
<script type="text/javascript" src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>

• 在vue.config.js中配置
  （注意配置好后，需要重启服务，以免报错）

 externals:  {
    // 全局常量定义出，也可以是window下的实例
    'AMap':  'AMap'  // 高德地图配置
},

• 在要使用的地方引入

import AMap from 'AMap'

• 初始化地图
  初始化地图有很多参数，这种方式是基于我的项目配置的（更多参数配置）

initMap(){
        this.mapObj = new AMap.Map('mapBox', {
            resizeEnable: true, //自适应大小
            zoom: 8,//设置地图显示的缩放级别
            center:[this.$store.state.userInfo.lng,this.$store.state.userInfo.lat], //设置地图中心点坐标
            layers: [//设置图层,可设置成包含一个或多个图层的数组
              // 卫星
              new AMap.TileLayer.Satellite(),
              // 路网
              new AMap.TileLayer.RoadNet()
            ],
        });

• 行政区描边（参考官方参数）

    setarea() {
        let that = this;
        AMap.plugin('AMap.DistrictSearch', function () {
            var districtSearch = new AMap.DistrictSearch({
                // 关键字对应的行政区级别
                level: 'city',
                //  显示下级行政区级数，1表示返回下一级行政区
                subdistrict: 1,
                // 返回行政区边界坐标等具体信息
                extensions: "all",
            })
            // 搜索所有省/直辖市信息 
            districtSearch.search('柳州', function(status, result) {
                // 查询成功时，result即为对应的行政区信息
                // console.log(result)
                // 获取相关区域的边界信息
                var bounds = result.districtList[0].boundaries
                var polygons = []
                if(bounds){
                    for (var i = 0, l = bounds.length; i < l; i++) {
                        //生成行政区划polygon
                        var polygon = new AMap.Polygon({
                            map: that.mapObj,
                            strokeWeight: 1,
                            path: bounds[i],
                            fillOpacity: 0.4,
                            fillColor: '#000000',
                            strokeColor: '#0000AA'
                        })
                        polygons.push(polygon)
                    }
                }
            })
        })
    },

• 地图上标记点
  (有两种标记点的方式：点标记 和 海量点标记 )
  此处案例是点标记

this.$axios.get(this.$api.GetFireUnitForMap,
        {params:{operateCenterId:this.OperateCenterId}}
 ).then(res=>{
        console.log("获取的点位",res)
        this.spots =res.result;
        let spotArray =[];
        let icon = new AMap.Icon({
          size: new AMap.Size(40, 50), // 图标尺寸
          image:
            "//datav.oss-cn-hangzhou.aliyuncs.com/uploads/images/32a60b3e7d599f983aa1a604fb640d7e.gif" // Icon的图像
        });
        for (let item of  this.spots) {
            let marker = new AMap.Marker({
                position: new AMap.LngLat(item.lng, item.lat), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
                title: item.fireunitId,
                offset: new AMap.Pixel(-10, -10),
                icon: icon
            });
            marker.item = item; // 自定义参数
            marker.on('click',this.getMapMarkInfo)
            spotArray.push(marker);
        }
        this.mapObj.add(spotArray);
      })    
    },