百度地图自定义标注、信息窗口、多种类聚合、主题（一篇呕心沥血的博客...）

百度地图自定义标注、信息窗口、多种类聚合、主题（一篇呕心沥血的博客...）

一、序

最近做百度地图的图形化定制。略有心得，在此和大家分享一下，少走弯路。先看目录，大致介绍一下都写了些啥。我会从最基本的来，一点点往下写，同志们可以看目录自己去找需要的部分。

ps：注意，我用的是百度地图 2.0 版本，例子也都是。

这个完整代码，我会上传到 github 上，觉得有用记得给个 star 哈，下载

二、目录

1、百度地图基本使用，以及主题的配置

2、点标注，自定义点标注的样式，动画、文字标签等

3、信息窗口，完全自定义点标注信息窗口，定制样式功能

4、图形标注。定制图形标注，也就是图形覆盖物

5、聚合。聚合的定制，多种聚合同时出现的配置

三、百度地图基本使用，以及主题的配置

这里，为了方便，全部用 html + js 来实现，首先是基本用法，引入百度地图的源文件，注意，这里我用的 2.0 的版本，秘钥大家需要自己去申请

。没秘钥肯定用不了的，申请流程很简单，请自行百度。关于 css、js 文件的引入，用到的我全部引入了，后面分开说各是做什么的。

做好准备工作，就开始新建一个dom，初始化 地图实例。然后 清除覆盖物 设置显示的中心点、设置

最大最小层级，设置默认显示层级。具体的直接看代码，都有注释。

到此，就已经可以看到地图了。然后我们换一些地图的 主题

。主题有2种，一种默认的，默认的注释里面都有写，也可以去官网自己查。一种是我们自定义的。自定义的方法：

到这个链接去配置，配置完了复制配置信息，在我们的地图中使用。具体复制哪一块，代码里面怎么用这个配置，请看代码，都有注释。但是怎么用这个百度的工具，自己捣鼓去吧，都是图形化的东西，也不难。

<

scripttype="text/javascript" src

="http://api.map.baidu.com/api?v=2.0&ak=********">

<

scripttype="text/javascript" src="./js/constants.js">

="myMap">

然后贴个图，看看效果

四、点标注，自定义点标注的样式，动画、文字标签等

现在我们来添加一下标注，首先你得有几个经纬度坐标点，可以用这个

百度的坐标拾取系统。蛮好用的 ps：

在这插一嘴，百度、腾讯、谷歌等等乱七八糟地图，他们用的坐标系不一样，如果坐标是别得地方来的，最好仔细看看，不同坐标系需要转换之后才能用，否则差距很大，此类插件也很多，这里不多说，有需要的可以评论处@我。

废话不多说，我这里有个点数据，有几个别的属性，是为了我写例子方便的，不必在意。准备工作完成后，首先我们把坐标实例化成点、有需要的在定制一下点的样式大小，动画、事件、文字标签等等。具体的请看代码。

const points = [ { lng: 120.03469, lat: 30.303904, infoWindow: 'search', func:

true}, { lng: 120.088499, lat: 30.275182,infoWindow: 'default' }, { lng:

120.089249, lat: 30.317759, infoWindow: 'InfoBox' }, { lng: 120.161941, lat:

30.283073, infoWindow: 'InfoBox', type: 1 }, { lng: 120.174941, lat: 30.275073,

infoWindow: 'InfoBox', type: 1 }, { lng: 120.186941, lat: 30.297073,

infoWindow: 'InfoBox', type: 1 }, { lng: 120.198941, lat: 30.299073,

infoWindow: 'InfoBox', type: 1 }, ] const markerClusterers = [[], []]

points.forEach(item=> { //实例化点 const point = new BMap.Point(item.lng, item.lat)

//自定义点的样式 const icon = new BMap.Icon( './image/yellow.png', new BMap.Size(32,

32) );

//生成点标注 const marker = new BMap.Marker(point, { icon: icon }); //动画

marker.setAnimation(BMAP_ANIMATION_BOUNCE)//文字标签 const label = new BMap.Label(

'我是文字描述', { offset: new BMap.Size( 20, 20 ) } ) label.setStyle({ color : "red",

fontSize :"12px", height : "20px", lineHeight : "20px", fontFamily:"微软雅黑" });

marker.setLabel(label);

//绑定事件 if (item.func) marker.addEventListener("click", function () {alert('你好'

)}); markerClusterers[item.type|| 0].push(marker)

//添加点标注即添加覆盖物 map.addOverlay(marker); })

贴图，看一下效果

五、信息窗口，完全自定义点标注信息窗口，定制样式功能

添加完标注，我们添加标注点击后的信息窗口。信息窗口我把他分为 3 种：简洁型，纯白 + 字，写起来最方便省事；

功能综合型，带导航、搜索等等各种功能的，功能多，但是样式固定，应用场景不多；完全自定义型，用InfoBox

开发的，样式完全自定义，功能也完全自定义，可以根据自己的需求自己开发，棒棒哒！ 这3种具体用法看代码，在这大致说一下，如果想用第二种，需要引入下面这个 js

文件和css文件

href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css">

如果想要第三种，需要引入我的本地的这个js文件。这里说明一下，百度地图时开源的，支持各种可以扩展的api，也支持各种改源码。自定义信息窗口这个貌似没有一个很官方的包，不过我用的这个也是百度官方示例用的，只不过没有公网链接，

只能自己下下来引入了。

ps: 这个自定义窗口是有api的，网上有很多瞎写的博客，去改源码的样式，导致代码乱七八糟，还影响地图其他的样式，害群之马，望君擦亮眼睛。

const points = [ { lng: 120.03469, lat: 30.303904, infoWindow: 'search', func:

true}, { lng: 120.088499, lat: 30.275182,infoWindow: 'default' }, { lng:

120.089249, lat: 30.317759, infoWindow: 'InfoBox' }, { lng: 120.161941, lat:

30.283073, infoWindow: 'InfoBox', type: 1 }, { lng: 120.174941, lat: 30.275073,

infoWindow: 'InfoBox', type: 1 }, { lng: 120.186941, lat: 30.297073,

infoWindow: 'InfoBox', type: 1 }, { lng: 120.198941, lat: 30.299073,

infoWindow: 'InfoBox', type: 1 }, ] const markerClusterers = [[], []]

points.forEach(item=> { //点 const point = new BMap.Point(item.lng, item.lat)

const icon= new BMap.Icon( './image/yellow.png', new BMap.Size(32, 32) ); const

marker= new BMap.Marker(point, { icon: icon }); //动画

marker.setAnimation(BMAP_ANIMATION_BOUNCE)//文字标签 const label = new BMap.Label(

'我是文字描述', { offset: new BMap.Size( 20, 20 ) } ) label.setStyle({ color : "red",

fontSize :"12px", height : "20px", lineHeight : "20px", fontFamily:"微软雅黑" });

marker.setLabel(label);//信息窗口

//简易的信息窗口 if (item.infoWindow === 'default') { const infoWindow = new

BMap.InfoWindow('简易的信息窗口')

//绑定事件，显示窗口 marker.addEventListener("click", function(){ this

.map.openInfoWindow(infoWindow,point); }); }else if (item.infoWindow ===

'search') {

//使用默认的综合功能类窗口 const searchInfoWindow = new

window.BMapLib.SearchInfoWindow(map, '综合功能型信息窗口', { width: 200, height: 80,

panel:"panel", enableAutoPan : true,

//这几个是添加导航、所有等功能的，具体每个啥意思，看官方文档 searchTypes:[ BMAPLIB_TAB_SEARCH,

BMAPLIB_TAB_TO_HERE, BMAPLIB_TAB_FROM_HERE ] }); marker.addEventListener(

"click",function(){ searchInfoWindow.open(point) }); } else if (item.infoWindow

=== 'InfoBox') {

//完全自定义的 样式、功能的窗口。第二个参数自定义html、css百度地图 自定义信息窗口，以及一些js的功能，根据需要自己去写样式和业务功能 const

customizedInfoWindow= new window.BMapLib.InfoBox(map, `

完全自定义型信息窗口

内容

`);

marker.addEventListener("click",function(){ customizedInfoWindow.open(point)

}); }if (item.func) marker.addEventListener("click", function () {alert('你好'

)}); markerClusterers[item.type|| 0].push(marker) map.addOverlay(marker); })

贴图看一下效果

六、图形标注。定制图形标注，也就是图形覆盖物

现在添加图形标注，这个比较简单，根据官方文档写就是了。画图标注需要引入如下js包：

不过这里提供一个不错的创意，就是地图选点 和 画电子围栏

，不做详细说明，下边会贴出效果，感兴趣的可以自己做一做，做不出来的可以@我，评论处留言，有时间的话，我会整理一下。

const style = {

strokeColor: "red", // 边线颜色

strokeWeight: 2, // 边线宽度

strokeOpacity: 1, // 边线透明度

fillColor: "#f8e71c", // 填充色颜色

fillOpacity: 0.3 // 填充色透明度

} const graphPoints = [{lng: 120.126973, lat: 30.30897}, {lng: 120.2822, lat:

30.326927}, {lng: 120.209186, lat: 30.225126}] let polygonPoint =

graphPoints.map(point => { return new BMap.Point(point.lng, point.lat) }) let

polygon= new BMap.Polygon( polygonPoint, { ...style } )

polygon.addEventListener("click",function () {alert('你好啊')});

polygon.enableEditing()// 多边形可编辑 map.addOverlay(polygon);

贴图，看看效果

然后贴一下我们项目 用户图形化配置百度地图，主要是画电子围栏的功能

七、聚合。聚合的定制，多种聚合同时出现的配置

接下来是聚合，聚合的使用很简单。不过这里特别说明2点：

1、聚合点数过多，一般万点左右，就会非常卡，这是源码的问题，现在不知道还有没有这个问题，反正我以前用的时候有。

解决方案： 直接修改源码，立竿见影，没后遗症。懒得写了，大家可以参考这位朋友的博客

2、多种类聚合。白话一点就是，1万个点，分

苹果、香蕉、桃子、哈密瓜等若干个种类，你需要把每个种类单独聚合，并用不同的效果区分开。这就是所谓的多种类聚合百度地图 自定义信息窗口，这个也是直接看代码。ps：这里只是简单介绍使用，如果做功能最好再加一些解释说明的覆盖物，大致说一下每个覆盖物代表什么，每个颜色代表的点数范围。

最后，提一下做聚合，需要引入如下2个js包：

//4、 设置 聚合 markerClusterers

//清除覆盖物 markerClusterers.forEach((item, index) => { if

(window[`markerClusterer${index}`])

window[`markerClusterer${index}`].clearMarkers()// delete this.markerClusterer

window[`markerClusterer${index}`] =null }) //2种聚合的实现 const size = new

BMap.Size( 48, 48 ) window.markerClusterer1 = new

window.BMapLib.MarkerClusterer(map, { markers: markerClusterers[1], styles: [{

url:'./image/wuxing1.png', size: size, textSize: 18, textColor: 'white', }, {

url:'./image/wuxing.png', size: size, textSize: 18, textColor: 'white', }, {

url:'./image/wuxing2.png', size: size, textSize: 18, textColor: 'white', }] })

window.markerClusterer2= new window.BMapLib.MarkerClusterer(map, { markers:

markerClusterers[0] })

贴图，看一下效果

小结

以上就是我总结的百度地图一些常用又不是那么好找的功能，博客比较零散，大家可以去我的 github 下载源码，好用记得给个star。

喜欢交流技术的朋友可以给我留言。后序还会再补充一些百度地图别的功能，这个看时间吧。。。