以下内容已录制
点击观看视频

百度地图api 一些常用的用法总结(笔记)

参考百度地图官方api：百度地图官方api
百度地图提供的拾取坐标： 百度地图提供的拾取坐标
注：百度地图api文档是真详细

加载地图前提：

1. 申请百度地图账号
2. 申请开发者填写开发者信息
3. 申请AK 点击查看申请步骤

一、 加载地图

加载地图步骤

1. 新建一个html页面
2. 引入js

<script type="text/javascript" src="http://api.map.baidu.com/api?type=webgl&v=1.0&ak=申请的AK"></script>

3. 写下样式

<style>
        html, body, #container {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
            padding: 0
        }
</style>

4. 创建地图容器元素

<div id="container"></div>

5. 开始写js 初始化地图

//1.创建地图实例
var map = new BMapGL.Map("container");
//2.设置中心经纬度  这里我们使用BMapGL命名空间下的Point类来创建一个坐标点。Point类描述了一个地理坐标点，其中120.872845表示经度，32.021089表示纬度。（为南通濠河风景区坐标）
var point = new BMapGL.Point(120.872845, 32.021089);
//3.在创建地图实例后，我们需要对其进行初始化，BMapGL.Map.centerAndZoom()方法要求设置中心点坐标和地图级别。 地图必须经过初始化才可以执行其他操作 值一般是3-19
map.centerAndZoom(point, 15);

map.centerAndZoom(point, 15);的最终效果
值越大 地图越大

map.centerAndZoom(point, 10);的最终效果
值越小 地图越小

二、 添加控件

var map = new BMapGL.Map("container");//创建地图实例
var point = new BMapGL.Point(120.872845, 32.021089);//设置中心经纬度
map.centerAndZoom(point, 15);//初始化地图
map.enableScrollWheelZoom(true); //开启鼠标滚轮 地图可以进行放大 缩小
map.addControl(new BMapGL.ScaleControl()); // 添加比例尺控件 左下角显示
map.addControl(new BMapGL.ZoomControl());// 添加缩放控件 右下角显示
map.addControl(new BMapGL.CityListControl());  // 添加城市列表控件 左上角
map.addControl(new BMapGL.MapTypeControl());// 地图类型 右上角显示

2.1 开启鼠标滚轮

map.enableScrollWheelZoom(true); //开启鼠标滚轮 地图可以进行放大 缩小

2.2 添加比例尺控件

map.addControl(new BMapGL.ScaleControl()); // 添加比例尺控件 左下角显示

2.3 添加缩放控件

map.addControl(new BMapGL.ZoomControl());// 添加缩放控件 右下角显示

2.4 添加城市列表控件

map.addControl(new BMapGL.CityListControl()); // 添加城市列表控件 左上角

2.5 添加地图类型

map.addControl(new BMapGL.MapTypeControl());// 地图类型 右上角显示
可切换3D地球模式

三、 文本标注

3.1添加默认的文本标注

//向地图添加了一个文本标注，并使用默认的标注样式：
var content = "hello world";
var label = new BMapGL.Label(content, {       // 创建文本标注
    position: point,                          // 设置标注的地理位置
    offset: new BMapGL.Size(10, 20)           // 设置标注的偏移量
})
map.addOverlay(label);                        // 将标注添加到地图中

3.2添加自定义样式的文本标注

//地图添加大号 文本标注
var content = 'hello world';
var label = new BMapGL.Label(content, {       // 创建文本标注
    position: point,
    offset: new BMapGL.Size(10, 20)
})
map.addOverlay(label);                        // 将标注添加到地图中
label.setStyle({                              // 设置label的样式
    color: '#000',
    fontSize: '50px',
    border: '2px solid blue'
})

3.3添加文本标注监听

//监听标注事件
label.addEventListener("click", function () {
    alert("您点击了文本标注");
});

四、 地图添加标注点

4.1 添加默认标注

添加成功后 会有一个默认的红色的定位图标显示在地图中

//Marker是一个用来往地图上添加点标记的类。使用它将任何你希望用户看到的兴趣点标注在地图上。
//API提供了默认图标样式，您也可以通过Icon类来指定自定义图标。Marker的构造函数的参数为Point和MarkerOptions（可选）。
//注意：当您使用自定义图标时，标注的地理坐标点将位于标注所用图标的中心位置，您可通过Icon的offset属性修改标定位置。
var point = new BMapGL.Point(120.872845, 32.021089);
var marker = new BMapGL.Marker(point);        // 创建标注
map.addOverlay(marker);                     // 将标注添加到地图中

4.2 添加自定义图片 标注（应用较多）

//定义标注图标 通过Icon类可实现自定义标注的图标，下面示例通过参数MarkerOptions的icon属性进行设置，您也可以
//marker.setIcon()方法。
var myIcon = new BMapGL.Icon("../images/love.png", new BMapGL.Size(23, 25), {
    // 指定定位位置。
    // 当标注显示在地图上时，其所指向的地理位置距离图标左上
    // 角各偏移10像素和25像素。您可以看到在本例中该位置即是
    // 图标中央下端的尖角位置。
    anchor: new BMapGL.Size(10, 25),
    // 设置图片偏移。
    // 当您需要从一幅较大的图片中截取某部分作为标注图标时，您
    // 需要指定大图的偏移位置，此做法与css sprites技术类似。
    //imageOffset: new BMapGL.Size(0, 0 - 25)   // 设置图片偏移
});
//创建标注对象并添加到地图
var marker = new BMapGL.Marker(point, { icon: myIcon });
map.addOverlay(marker);

4.3 设置图标可拖拽

enableDragging: true//设置图标可拖拽

var marker = new BMapGL.Marker(point, {
	icon: myIcon,
	enableDragging: true//设置图标可拖拽
});

4.4 添加地图标注监听

点击标注 出发点击事件

marker.addEventListener("click", function () {
    alert("您点击了自定义标注");
});

五、信息窗口

5.1 添加信息窗口

var point = new BMapGL.Point(120.872845, 32.021089);
var opts = {
    width: 250,     // 信息窗口宽度
    height: 100,    // 信息窗口高度
    title: "Hello World"  // 信息窗口标题
}
let content = `<table><tr><td>1</td><td>2</td><td>3</td></tr></table>`;
var infoWindow = new BMapGL.InfoWindow(content, opts);  // 创建信息窗口对象
map.openInfoWindow(infoWindow, point);        // 打开信息窗口

//同时监听标注的点击事件
marker.addEventListener("click", function () {
    map.openInfoWindow(infoWindow, point);        // 打开信息窗口
});

六、 设置地图3D视觉+设置天空颜色

//设置地图3D视觉
map.setHeading(64.5);//旋转角度
map.setTilt(73);//地图倾斜
//设置天空颜色
map.setDisplayOptions({
    skyColors: ['rgba(186, 0, 255, 0)', 'rgba(186, 0, 255, 0.2)']//天空颜色
})

七、 交通流量图层

查看交通拥堵状况 红色为拥堵

var map = new BMapGL.Map("container");   // 创建地图实例
var point = new BMapGL.Point(121.441661, 31.173661);   // 创建点坐标
map.centerAndZoom(point, 15);                    // 初始化地图，设置中心点坐标和地图级别
map.enableScrollWheelZoom(true);                 // 开启鼠标滚轮缩放
map.setTrafficOn();                              // 添加交通流量图层

八、出行路线规划

8.1 驾车路线规划

传入起点和终点的两个ip地址，
可计算出驾车的距离和通行时间

var map = new BMapGL.Map("container");
map.centerAndZoom(new BMapGL.Point(121.187484, 31.869261), 12);
var output = '驾车需要：';
var start = new BMapGL.Point(121.187484, 31.869261);
var end = new BMapGL.Point(121.189752, 31.86958);
var driving = new BMapGL.DrivingRoute(map, {
    renderOptions: { map: map, autoViewport: true },
    onSearchComplete: function (results) {
        if (driving.getStatus() != BMAP_STATUS_SUCCESS) {
            return;
        }
        var plan = results.getPlan(0);
        output += '总时长：' + plan.getDuration(true);  //获取时间
        output += '总路程：' + plan.getDistance(true);  //获取距离
        $('#result').css('display', 'block');
        $('#result').html(output);
    },
});
driving.search(start, end);

8.2 公交路线规划

传入起点和终点的两个ip地址，
可计算出公交行驶的距离和通行时间

var map = new BMapGL.Map('container');
map.centerAndZoom(new BMapGL.Point(121.171548, 31.884098), 12);
var output = '坐公交车需要：';
var transit = new BMapGL.TransitRoute(map, {
    renderOptions: { map: map },
    onSearchComplete: function (results) {
        if (transit.getStatus() != BMAP_STATUS_SUCCESS) {
            return;
        }
        var plan = results.getPlan(0);
        output += '总时长：' + plan.getDuration(true);  //获取时间
        output += '总路程：' + plan.getDistance(true);  //获取距离
        $('#result').css('display', 'block');
        $('#result').html(output);
    },
});
var start = new BMapGL.Point(121.171548, 31.884098);
var end = new BMapGL.Point(121.193466, 31.873612);
transit.search(start, end);

8.3 步行路线规划

传入起点和终点的两个ip地址，
可计算出步行的距离和通行时间

var map = new BMapGL.Map("container");
map.enableScrollWheelZoom();
map.centerAndZoom(new BMapGL.Point(121.187484, 31.869261), 12);
var output = '步行需要：';
var walking = new BMapGL.WalkingRoute(map, {
    renderOptions: { map: map, autoViewport: true },
    onSearchComplete: function (results) {
        if (walking.getStatus() != BMAP_STATUS_SUCCESS) {
            return;
        }
        var plan = results.getPlan(0);
        output += '总时长：' + plan.getDuration(true);  //获取时间
        output += '总路程：' + plan.getDistance(true);  //获取距离
        $('#result').css('display', 'block');
        $('#result').html(output);
    },

8.4 骑行路线规划

传入起点和终点的两个ip地址，
可计算出骑行的距离和通行时间

var map = new BMapGL.Map("container");
map.centerAndZoom(new BMapGL.Point(121.187484, 31.869261), 12);
var output = '骑行需要：';
var riding = new BMapGL.RidingRoute(map, {
    renderOptions: {
        map: map,
        autoViewport: true
    },
    onSearchComplete: function (results) {
        if (riding.getStatus() != BMAP_STATUS_SUCCESS) {
            return;
        }
        var plan = results.getPlan(0);
        output += '总时长：' + plan.getDuration(true);  //获取时间
        output += '总路程：' + plan.getDistance(true);  //获取距离
        $('#result').css('display', 'block');
        $('#result').html(output);
    },
});
var start = new BMapGL.Point(121.187484, 31.869261);
var end = new BMapGL.Point(121.189752, 31.86958);

九、 个性化地图

效果

登录 百度地图api官网
点击开发文档->个性化地图编辑器

开始使用

点击新建

选一个免费的模板 点击使用

点击编辑JSON 复制所有json代码

将复制的json对象赋值给styleJson 对象
map.setMapStyleV2({ styleJson: styleJson });即可渲染地图

---

一、百度地图开放平台是什么？

    百度地图开放平台是面向广大政府、企业、互联网等开发者开放地图服务的平台。百度地图开放平台。若想使用高德地图，请查看文章Vue+高德地图api。

二、创建百度地图

1.创建vue项目

推荐使用vue-element-admin作为模板，这一步骤就不多阐述。

2.引入百度地图API文件

在index.html中引入。
要注意版本，不同版本的方法会有所不同，这里使用v3.0。

<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=您的秘钥"></script>

config.js配置webpack，此操作是为了优化打包，减少体积。在externals中添加百度地图即可

3.创建容器

创建一个新的组件

<template>
  <div>
  	<!-- 必须要设置div的高度 -->
    <div id="map" style="height: 810px;" />
  </div>
</template>
<script>
// 引入百度地图
import BMap from 'BMap'
export default {
  name: '',
  data() {
    return {
      map: '',
      mapZoom: 14
    }
  },
  created() {
    this.$nextTick(() => {
      this.initMap()
    })
  },
  methods: {
  	// 初始化
  	initMap() {
      // 创建Map实例
      this.map = new BMap.Map('map')
      // 初始化地图,设置中心点坐标和地图级别
      this.map.centerAndZoom(new BMap.Point(104.072242, 30.663711), this.mapZoom)
      // 设置地图显示的城市 此项是必须设置的
      this.map.setCurrentCity('成都')
      // 启用滚轮放大缩小，默认禁用
      this.map.enableScrollWheelZoom(true)
      // 启用地图惯性拖拽，默认禁用
      this.map.enableContinuousZoom(true)
    }
  }
</script>
<style>
// 这个样式可以去除地图底部logo
.anchorBL{
  display:none;
}
</style>

这样简单的百度地图示例已经完成。

三、使用百度地图

1、基础操作

按照上述步骤已经对百度地图进行初始化，并把实例赋值给map，然后就可以使用this.map来调用百度地图的方法。

（1）事件

①点击事件

在初始化的方法中，加入事件即可。

this.map.addEventListener('click', (data) => {
	// point包含了经纬度
	console.log(data.point)
})

②地图缩放结束事件

this.map.addEventListener("zoomend", (type) => {})

（2）创建覆盖物（点、线、面）

// 创建一个自定义图片的点覆盖物
addMarker() {
	// 添加图片
	var myIcon = new BMap.Icon("图片地址", new BMap.Size(50, 50))
	// 创建点
	var ponit = new BMap.Point(104.072242, 30.663711)
	// 创建标记
	var marker = new BMap.Marker(ponit, {icon: myIcon})
	// 在地图上添加点标记
	this.map.addOverlay(marker)
}

// 创建线覆盖物
addPolygon() {
	const point = [
		new BMap.Point(116.387112, 39.920977),
        new BMap.Point(116.385243, 39.913063),
        new BMap.Point(116.394226, 39.917988),
        new BMap.Point(116.401772, 39.921364),
        new BMap.Point(116.41248, 39.927893)
	]
	var polyline = new BMap.Polyline(point, {
		// 颜色
		strokeColor: "blue",
		// 宽度
		strokeWeight: 2,
		// 透明度
		strokeOpacity: 0.5,
	});
}

效果图

（3）添加信息窗口

添加完点标记后，可以再设置一个信息窗口

// 接着上面代码
marker.addEventListener('click', () => {
  var opts = {
    width: 200,
    height: 150,
    title: '基本信息'
  }
  var html = `<div>
                <p>单位名称：${item.name}</p>
                <p>联系电话${item.contactInformation}</p>
                <p>单位地址：${item.enterpriseAddressDetails}</p>
              </div>`
  var infoWindow = new BMap.InfoWindow(html, opts)
  this.map.openInfoWindow(infoWindow, ponit)
})

（4）清除覆盖物

①清除所有

removeOverlay() {
	this.map.clearOverlays()
}

②清除指定

1.创建一个点，然后清除。removeOverlay方法的参数是一个覆盖物对象，想要清除多个时，需要用把覆盖物放在数组里，然后循环清除。注意new BMap.Marker()方法相当于每次创建了一个新的对象，所以并不能通过同一个坐标新建一个marker来删除之前的。

// 创建一个标记
var ponit = new BMap.Point(104.072242, 30.663711)
var marker = new BMap.Marker(ponit)
this.map.addOverlay(marker)
// 清除一个标记
this.map.removeOverlay(marker)

其他覆盖物同理，比如创建一个圆，然后清除

var circle = new BMap.Circle(point, 2000, {
	fillColor: "blue",
	strokeWeight: 1,
  	fillOpacity: 0.2,
  	strokeOpacity: 0.3,
})
this.map.addOverlay(circle)
this.map.removeOverlay(circle)

2.发现有一些覆盖物用上述方法并不能删除，如路书中的icon。

const moveMarker = new BMap.Icon(
	img,
	{ widht: 30, height: 36 },
	{ anchor: new BMap.Size(15, 36) }
);
// 创建路书
const lushu = new BMapLib.LuShu(this.centerMap, point, {
	defaultContent: "标题",
	icon: moveMarker,
	// 米/秒
	speed: 300,
	// 是否自动调整视野
	autoView: false,
	// 是否开启走路旋转
	enableRotation: false,
	landmarkPois: [],
});

使用this.map.addOverlay(moveMarker)发现没有删除。我们可以通过自己加一些自定义属性来删除。

const moveMarker = new BMap.Icon(
	img,
	{ widht: 30, height: 36 },
	{ anchor: new BMap.Size(15, 36) }
);
// 加入一个自定id并赋值
moveMarker.id = "123456";
// 创建路书
const lushu = new BMapLib.LuShu(this.centerMap, point, {
	defaultContent: "标题",
	icon: moveMarker,
	// 米/秒
	speed: 300,
	// 是否自动调整视野
	autoView: false,
	// 是否开启走路旋转
	enableRotation: false,
	landmarkPois: [],
});
// 获取当前地图上所有的覆盖物
const overlays = this.map.getOverlays();
overlays.forEach((item) => {
	// 循环寻找上面添加的指定id（属性较多，而且可能不一定是K这个变量，需要仔细找一下）
	if (item.K && item.K.Be && item.K.Be.id === "123456") {
		this.map.removeOverlay(item);
	}
});

（5）地址逆解析

const geoc = new BMap.Geocoder()
const ponit = new BMap.Point(104.072242, 30.663711)
geoc.getLocation(ponit, (res) => {
  console.log(res.address)
})

2、控件

（1）城市控件

通过搜索城市名称，然后定位所选城市

// 创建城市选择控件
const cityControl = new BMap.CityListControl({
  /* 
  	控件的停靠位置（可选，默认左上角）
  	BMAP_ANCHOR_TOP_RIGHT 右上角
  	BMAP_ANCHOR_BOTTOM_LEFT 左下角
  	BMAP_ANCHOR_BOTTOM_RIGHT 右下角
  */
  anchor: BMAP_ANCHOR_TOP_LEFT,
  // 控件基于停靠位置的偏移量（可选）
  offset: new BMap.Size(10, 5)
})
// 将控件添加到地图上
this.map.addControl(cityControl)

效果如图

（2）地址检索

在地图初始化的时候添加一个地址检索

<!-- 地图容器 -->
<div id="caseMap" style="width: 100%; height: 370px" />
<!-- 检索地址容器 -->
<div id="r-result" style="float: left; margin-top: -370px">
	<el-input
		style="width: 350px"
		size="mini"
		type="text"
		id="suggestId"
		v-model="city"
	>
		<template slot="prepend">请输入：</template>
	</el-input>
</div>

initMap() {
	const self = this
	// 创建Map实例
	this.map = new BMap.Map('map')
	// 初始化地图,设置中心点坐标和地图级别
	this.map.centerAndZoom(new BMap.Point(104.072242, 30.663711), this.mapZoom)
	// 设置地图显示的城市 此项是必须设置的
	this.map.setCurrentCity('成都')
	// 启用滚轮放大缩小，默认禁用
	this.map.enableScrollWheelZoom(true)
	// 启用地图惯性拖拽，默认禁用
	this.map.enableContinuousZoom(true)
	//建立一个自动完成的对象
	var ac = new BMap.Autocomplete({
      // 输入框的id
      input: "suggestId",
      location: this.map,
    })
    ac.addEventListener("onhighlight", function (e) {
      //鼠标放在下拉列表上的事件
    })
    ac.addEventListener("onconfirm", function (e) {
      //鼠标点击下拉列表后的事件
      var _value = e.item.value;
      // 拼装的地址信息
      var myValue =
        _value.province +
        _value.city +
        _value.district +
        _value.street +
        _value.business;
      self.setPlace(myValue);
    })
}
setPlace(e) {
	const self = this;
	this.map.clearOverlays(); //清除地图上所有覆盖物
	// 创建一个检索对象
	var local = new BMap.LocalSearch(self.map, {
		//智能搜索
		onSearchComplete: function () {
			var pp = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
			// 获取的经纬度根据自己业务赋值
			// self.dataForm.address = e;
			// self.dataForm.longitude = pp.lng;
			// self.dataForm.latitude = pp.lat;
			self.map.centerAndZoom(pp, 18);
			self.map.addOverlay(new BMap.Marker(pp)); //添加标注
		},
	});
	local.search(e);
},

效果图

Tip如果是在<el-dialog />组件中使用搜索时，需要注意搜索提示会没有，这是因为被挡住了。我们通过F12是可以看到的。这时候就需要把提示框的z-index设置大一些就行了。

.tangram-suggestion-main {
  z-index: 9999;
}

3、线路规划

（1）步行线路规划

<!-- 放搜索结果 -->
<div id="r-result" style="position: fixed; top: 100px; right: 5px"></div>

var walking = new BMap.WalkingRoute(this.centerMap, { 
    renderOptions: { 
        map: this.centerMap,
        /* 
         * 这里是百度地图的检索路线结果面板，在html中写一个div用于展示，panel的值为div的id。
         * 有些时候我们可能不需要过多的信息，这时可以用onSearchComplete方法自定义一个面板。
         */
        panel: "r-result",
        // 是否选择第一个检索结果
        selectFirstResult: true,
        // 检索结束后是否自动调整地图视野
        autoViewport: true 
    },
    // 检索完成后回调
    onSearchComplete: function(results){
      if (walking.getStatus() != BMAP_STATUS_SUCCESS){
          return
      }
      // 获取第一个路线
      var plan = results.getPlan(0)
      // 获取时间
      plan.getDuration(true)
      // 获取距离
      plan.getDistance(true)
    }
})
var start = new BMap.Point(116.310791, 40.003419)
var end = new BMap.Point(116.326419, 40.003519)
walking.search(start, end)

效果图

（2）驾车路线规划

代码跟步行类似，只需把new BMap.WalkingRoute()换成new BMap.DrivingRoute()即可。

4、覆盖物

（1）轨迹运动——路书

1.首先在index.html页面引入路书js文件

<script type="text/javascript" src="https://api.map.baidu.com/library/LuShu/1.2/src/LuShu_min.js"></script>

2.创建路书

// 假设points是从后端请求的经纬度数据
const points = [
	{lng: 116.387112, lat: 39.920977},
	{lng: 116.385243, lat: 39.913063},
	.....
]
const point = []
points.forEach(item => {
	point.push(new BMap.Point(item.lng, item.lat))
}
// 添加线覆盖物当做路线
var polyline = new BMap.Polyline(point, {
	strokeColor: "blue",
	strokeWeight: 2,
	strokeOpacity: 0.5,
});
this.centerMap.addOverlay(polyline);
// this.centerMap 创建的地图实例
// point 坐标数组，必须是用new BMap.Point()创建的坐标数组
// opts 自定义设置
var lushu = new BMapLib.LuShu(this.centerMap, point, {
	// 标题
	defaultContent: "运动轨迹",
	// 图标
	icon: "",
	// 速度，单位米/秒
	speed: 300,
	// 是否自动调整视野
	autoView: true,
	// 是否开启走路旋转
	enableRotation: true,
	// 特殊点信息。如果没有特殊点直接放个空数组也可以，不设置参数貌似会报错
	landmarkPois: [],
});
lushu.start();

3.方法

// 启动运动
lushu.start();
// 暂停运动
lushu.pause();
// 结束运动
lushu.stop();

效果图

5、工具库

（1）点聚合

①添加

当点的数量过多时，会造成浏览器卡顿，使用点聚合可以有效解决该问题。点聚合的使用也很简单，首先在index页面引入点聚合工具开源库的文件

<script type="text/javascript" src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>

使用

// 模拟一些点
const markers = [
	new BMap.Marker(new BMap.Point(116.387112, 39.920977)),
	new BMap.Marker(new BMap.Point(116.385243, 39.913063)),
	new BMap.Marker(new BMap.Point(116.394226, 39.917988)),
	new BMap.Marker(new BMap.Point(116.401772, 39.921364)),
	new BMap.Marker(new BMap.Point(116.41248, 39.927893)),
]
// markerClusterer是点聚合工具的对象，全局使用。this.map是地图对象
this.markerClusterer = new BMapLib.MarkerClusterer(this.map, {
	markers: markers,
});

效果

放大后可展示具体点位

②清除

// 清除所有
this.markerClusterer.clearMarkers()
// 清除一个marker
this.markerClusterer.removeMarker(marker)
// 清除多个，这时候参数为marker数组
this.markerClusterer.removeMarkers(markers)

（2）热力图

①引入js

<script type="text/javascript" src="//api.map.baidu.com/library/Heatmap/2.0/src/Heatmap_min.js"></script>

②使用

this.heatmapOverlay = new BMapLib.HeatmapOverlay({
  radius: 20,
});
this.map.addOverlay(this.heatmapOverlay);
// point数据格式，lat纬度，lng经度，count热力值，就算为1好像页面上也会自动显示热力层级
// 假设从后端取回数据result
result.forEach(item => {
	point.push({
		lat: item.latitude,
		lng: item.longitude,
		count: 1,
	});
})
this.heatmapOverlay.setDataSet({
  // 热力值的最大值
  max: 5,
  // 热力图的详细数据
  data: point,
});
this.heatmapOverlay.show();
// 隐藏
this.heatmapOverlay.hiden();
// 删除
this.map.removeOverlay.(this.heatmapOverlay);

四、其他

（1）坐标转换

（1）使用百度地图自带的方法进行转换坐标转换文档

var x = 116.32715863448607
var y = 39.990912172420714
var convertor = new BMap.Convertor()
var pointArr = []
var ggPoint = new BMap.Point(x,y)
pointArr.push(ggPoint)
convertor.translate(pointArr, 3, 5, function(data) {
	if(data.status === 0) {
    	// 业务代码
    }
})

translate方法的第一个参数为Point类型的数组，第二个参数是源坐标类型，第三个参数是目标坐标类型，第四个是回调函数（坐标类型在文档中有详细说明）。

需要注意的是方法在批量转换坐标时是有上限的，这里推荐使用coordtransform模块，用法很简单。
先用npm安装npm install coordtransform，创建一个js工具类，引入coordtransform就可以使用了。

import coordtransform from 'coordtransform'

// 火星坐标转百度经纬度坐标
export function gcj02tobd09(x, y) {
  return coordtransform.gcj02tobd09(x, y)
}

个性化地图

效果

登录 百度地图api官网
点击开发文档->个性化地图编辑器

开始使用

点击新建

选一个免费的模板 点击使用

点击编辑JSON 复制所有json代码

将复制的json对象赋值给styleJson 对象
map.setMapStyleV2({ styleJson: styleJson });即可渲染地图