百度地图的使用操作

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

百度地图是我们常用的一个地图工具，今天主要是说下个性化地图的使用操作和一些标注点的使用的一些问题。

1、百度地图的自定义主题的使用

官网

lbsyun.baidu.com/customv2/ed…

打开上面的链接，进入百度地图的个性化主题的页面

选择好自己想要的样式之后，右上角选择对应的操作，我的是下载样式文件引入使用

引入样式json文件

import bmapJSON from '../../../assets/js/custom_map_config.json'

使用

bmap.setMapStyleV2({styleJson:mapstyle});  //百度开发平台下载的地图样式json文件

2、循环显示标注点

引入标注图标

import Micon from '../../../assets/icon/marker2.png'
import MiconHover from '../../../assets/icon/markerHover.png'
import MiconActive from '../../../assets/icon/markerActive.png'

接收后端返回来的数据

let projectList = this.projectList
var bmap = new BMap.Map("map");    // 创建Map实例

循环显示标注点

for (var i = 0; i < projectList.length; i++) { //循环创建标注点
        let myIcon =  new BMap.Icon(Micon, new BMap.Size(60,119));
        var point = new BMap.Point(parseFloat(projectList[i].gpsX), parseFloat(projectList[i].gpsY));
        var marker = new BMap.Marker(point, {
          icon: myIcon
        })

        marker.setLabel(label);
        marker.customData = { 'data': projectList[i] } // 添加标点数据
        this.markerList.push(marker)
        bmap.addOverlay(marker); // 添加标点
      }

添加lable窗口

var label = new BMap.Label(projectList[i].sectionName, { offset: new BMap.Size(49, 2) });//label的样式设置
        label.setStyle({
          display: "none",
          color: "#fff",
          fontSize: "12px",
          fontFamily: "微软雅黑",
          backgroundColor: "rgb(11,34,44)",
          padding: "5px 10px",
          borderWidth: 1,
          borderColor: "rgb(0,254,212)",
          borderRadius: "6px",
          borderLeft:'none',
          zIndex:'-5'
        });

        marker.setLabel(label);

3、标注点的事件--- 切换标注点图标

鼠标移入事件

marker.addEventListener("mouseover", function (e,i) {//鼠标移入事件
          var label = this.getLabel()
          label.setStyle({ display: "block", borderColor: "#fe8418"}); //鼠标移入显示窗口
          let icon = new BMap.Icon(MiconHover, new BMap.Size(60,119));//鼠标移入改变标注点图标
          this.setIcon(icon);
            this.setZIndex(999)//修改标注点的权重
        });

鼠标移出事件

 marker.addEventListener("mouseout", function (e) {
          var label = this.getLabel()
          label.setStyle({ display: "none",borderColor: "rgb(0,254,212)"});//鼠标隐藏显示窗口
          let icon = new BMap.Icon(Micon, new BMap.Size(60,119));//鼠标移出改变标注点图标
          this.setIcon(icon);
        });

鼠标的点击事件

marker.addEventListener("click", function (e) {
          console.log(e.target.customData.data)
          that.showSectionInfo(e.target.customData.data)
          let icon = new BMap.Icon(MiconActive, new BMap.Size(60,119));
          this.setIcon(icon);
});