一、前期准备

1、  申请密匙

去百度地图控制台申请密匙。

2、  在index.html引入

注：去掉地图左下角的logo

.BMap_cpyCtrl{display:none;

}.anchorBL{display:none;

}

3、webpack.base.conf.js里面配置

在module.exports中与entry同级添加

externals: {"BMap": "BMap"},

4、  需要使用百度地图的组件中导入(地图中用到BMap 的需要导入)

import BMap from ‘BMap‘

5、   创建一个地图容器，需要有宽高

6、   然后在vue生命周期的mounted中调用

mounted() {this.initMap();

},

InitMap方法如下

//初始化地图

initMap() {this.map = new BMap.Map("mapBox"); //创建Map实例

this.map.centerAndZoom(new BMap.Point(108.95, 37.38), 5); //初始化地图,设置中心点坐标和地图级别

this.map.setCurrentCity("北京"); //设置地图显示的城市 此项是必须设置的

this.map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放

},

这样最初的地图就出来了

二：添加地图覆盖物(label,marker, initInfoWindow)

首先看后台给的数据

[{"lng":119.417854,"lat":39.921988,"total":10,"type":"red","content":"XX"},{"lng":116.417854,"lat":39.921988,"total":10,"type":"red","content":" XXXX"}]"

1、  初始化marker

// 初始化标注

//初始化标注

initMarker(data) {

let myIcon= null;

let pt= newBMap.Point(data.lng, data.lat);if (data.type == "red") {

myIcon= newBMap.Icon(

require("../assets/img/red_marker.png"),new BMap.Size(47, 52)

);

}else{

myIcon= newBMap.Icon(

require("../assets/img/bule_marker.png"),new BMap.Size(47, 52)

);

}return newBMap.Marker(pt, { icon: myIcon });//return new BMap.Marker(pt);

},

2、  初始化label

//初始化文字标签

initLabel(data) {

let opts={

position:new BMap.Point(data.lng, data.lat), //指定文本标注所在的地理位置

offset: new BMap.Size(-8, -25) //设置文本偏移量

};if (data.total < 10) {

opts.offset= new BMap.Size(-4, -18);

}else if (data.total >= 10 && data.total < 100) {

opts.offset= new BMap.Size(-8, -18);

}else if (data.total >= 100 && data.total < 1000) {

opts.offset= new BMap.Size(-12, -18);

}

let label= new BMap.Label(data.total, opts); //创建文本标注对象

label.setStyle({

color:"#fff",

border:"none",

fontSize:"12px",

height:"20px",

lineHeight:"20px",

fontFamily:"微软雅黑",

background:"rgba(0,0,0,0)"});returnlabel;

},

3、  初始化initInfoWindow

initInfoWindow(data) {

let str=data. content; //自定义窗口内容

return newBMap.InfoWindow(str, {

offset: {//偏移量

width: 5,

height:-20},

width:300,

enableCloseOnClick:true});

},

注：如下图在marker上加数字有多种方法

(1)、通过自定义覆盖物做成数字然后添加上去。研究了下，比较麻烦具体看

https://blog.csdn.net/phper111/article/details/77897940

(2)、通过label设置偏移与样式

接下来是根据后台给的数据来整理自己需要的数据

4、  添加标注事件

setInfoWindow() {//清除地图上标注,文字标签

this.overlays.forEach(value =>{this.map.removeOverlay(value);

});//往地图添加标注点，与信息窗口

this.markerArr.forEach(opt =>{

let infoWindow= this.initInfoWindow(opt.data); //创建信息窗口对象

let marker = this.initMarker(opt.data); //创建标注点

let label = this.initLabel(opt.data); //创建文字标签

this.map.addOverlay(marker);this.map.addOverlay(label);this.overlays.push(marker, label);//监听打开信息窗口

let this_ = this;

marker.addEventListener("click", function() {

this_.map.openInfoWindow(infoWindow, opt.point);//开启信息窗口

this_.map.removeOverlay(marker);

opt.data.type= "blue";

this_.setInfoWindow();

$(".BMap_pop>img").hide();

});//监听关闭信息窗口

infoWindow.addEventListener("close", function() {

opt.data.type= "red";

this_.setInfoWindow();

});

});

}

最后就是这样的效果啦，当点击marker变蓝色

原文：https://www.cnblogs.com/yjmBlogs/p/10212509.html