Vue+高德地图

今天药忘吃喽~ 2023-02-09 13:29 13阅读 0赞

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

功能描述：  
在vue框架（vue-cli3）中使用高德地图，展示地图，规划行政区域，标点。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMwNzI4Mw_size_16_color_FFFFFF_t_70]  
具体步骤：

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMwNzI4Mw_size_16_color_FFFFFF_t_70 2]

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

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

![在这里插入图片描述][20200519102420223.png]

*  在要使用的地方引入

import AMap from 'AMap'

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

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()
                ],
            });

*  行政区描边（[参考官方参数][Link 2]）

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)
                        }
                    }
                })
            })
        },

*  地图上标记点  
    (有两种标记点的方式：[点标记][Link 3] 和 [海量点标记][Link 4] )  
    此处案例是点标记

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);
          })    
        },

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMwNzI4Mw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200519095445729.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMwNzI4Mw==,size_16,color_FFFFFF,t_70
[api]: https://console.amap.com/dev/key/app
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMwNzI4Mw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200519095640247.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMwNzI4Mw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMwNzI4Mw_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200519100207410.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMwNzI4Mw==,size_16,color_FFFFFF,t_70
[20200519102420223.png]: https://img-blog.csdnimg.cn/20200519102420223.png
[Link 1]: https://lbs.amap.com/api/javascript-api/reference/map
[Link 2]: https://lbs.amap.com/api/javascript-api/guide/services/district-search
[Link 3]: https://lbs.amap.com/api/javascript-api/guide/overlays/marker
[Link 4]: https://lbs.amap.com/api/javascript-api/guide/overlays/massmarker