高德地图在vue中的应用

熊孩子依旧调皮
1,296 阅读3分钟

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第11天，点击查看活动详情。

前言

接到新需求，在vue项目中加入地图并展示指定坐标点位置和相应位置的信息，鼠标移到相应的省份要变换颜色，而且还要绑定上点击事件能够跳转到二级页，让人一看有一种酷炫的感觉。效果如下：

image.png

引入和初始化地图

  • 引入 需要在script内加上高德地图的链接，key值是通过高德控制台创建后获取。
http://webapi.amap.com/maps?v=1.4.15&key=${MapKey}

引入高德ui库，官方的ui库还是比较完善的

https://webapi.amap.com/ui/1.1/main.js
  • 初始化
  1. 创建 new Amap为初始化高德地图对象，在内传参高德地图模块的ID，和配置
new AMap.Map("mapCon", this.mapConfig)
  1. 初始化配置 zoom为初始化地图的大小，mapstyle：地图的样式颜色，viewMode：使用3D视图，pitch：俯视高度，rotation：旋转角度，center：中心点坐标，其中mapStyle可以从控制台自定义并获取ID，
  this.mapConfig = {
    zoom: 4.8,
    mapStyle: "amap://styles/xxx",
    viewMode: "3D",
    pitch: 0,
    rotation: 10,
    center: [109.591091, 33.096726],
  };
  1. 引入插件 我这里用的插件是3D罗盘插件和行政区域插件，Amap.plugin为插件方法，在内使用addControl添加到地图上，注意! 必须要new一下此插件
 AMap.plugin(["AMap.ControlBar","AMap.DistrictLayer"], function () {
    map.addControl(new AMap.ControlBar());
    map.addControl(new AMap.DistrictLayer());
});

图层

前言说到鼠标移到相应的省份，那个省份变换颜色，所以咱们需要创建颜色图层给它覆盖上去

  1. 创建行政区插件
new AMap.DistrictLayer.Province
  1. 插件配置 在内咱们需要配置行政区代码和图层层级，我这里就用最高层级，意思是只显示省份和下边的县级市颜色一起高亮，我这里把颜色方法封装在getColorByAdcode内
zIndex: 1,
SOC:'CHN',
adcode: [code],
depth: dep,
styles: {
  fill: function (properties) {
    var adcode = properties.adcode;
    return that.getColorByAdcode(adcode,'#2D59E6');
  },
},

其中：SOC为中国区域，adcode为行政区代码，depth为层级级别，style为设置颜色：fill方法内回调函数properties可以显示当前行政区颜色的代码和名字和一些其他选项

  1. 设置颜色方法 如果当前code没颜色就给它设置一个颜色，颜色是通过方法传过来的，如果是一个群组的话咱们需要创建一个colors对象方便和adcode匹配到一起
getColorByAdcode(adcode,color) {
  var colors = {};
  if (!colors[adcode]) {
    colors[adcode] = color;
  }
  return colors[adcode];
},
  1. 把插件设置到地图上
disProvince.setMap(that.map);

markers设置

思路：从返回的地图数据中如果有需要展示的东西，会返回坐标点Lat,Lng并设置相应的图标，点击相应的图标在上方显示内容

  • 创建marker
for(var i in list){
    let marker = new AMap.Marker({
        position: new AMap.LngLat(list[i].lng,list[i].lat),
        clickable:true,
        extData:list[i],
        icon:''
    })
}

因为返回的坐标点和内容不止一个所以咱们需要使用循环来批量创建，position为该图标的坐标点，icon：图标路径，clickable:是否可以点击，extData:这个是给每个marker设置当前相应的参数内容

  • 弹窗创建 思路：在循环中给markger绑定点击事件，并给它设置一个label,
marker.on("click",function(e){
    this.setLabel({
       content:extData.NAME + '<br>' + extData.address,
       direction:'top'
    })
})

事件绑定使用.on来绑事件，回调函数是咱们循环中设置的extData，注意this.setLabel的this是点击事件中的this，content为文本，direction为弹窗的方向

参考资料

高德地图事件

高德地图覆盖物

avatar
文章
阅读
粉丝