JS 百度地图实现地图上显示多种自定义覆盖物

最新推荐文章于 2024-05-29 14:16:59 发布

sinat_20695925

最新推荐文章于 2024-05-29 14:16:59 发布

阅读量5.2k

点赞数 2

分类专栏： BMap Echarts js 文章标签： BMap

本文链接：https://blog.csdn.net/sinat_20695925/article/details/85330680

版权

BMap 同时被 3 个专栏收录

1 篇文章 0 订阅

订阅专栏

Echarts

1 篇文章 0 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

JS 百度地图实现地图上显示多种自定义覆盖物功能总结（可结合Echarts实现，多看api,能节省不少时间）

实现效果图：

1.BMap 坐标点添加自定义标注（Maker使用图片）

2.BMap 标注弹出信息提示框（使用InfoWindow）

var pointArray = new Array();

var maker = new Array();

var greenIcon = new BMap.Icon('/public/src/Partner/img/green_normal.png',new BMap.Size(30,30));

var purpleIcon = new BMap.Icon('/public/src/Partner/img/purple_offline.png',new BMap.Size(30,30));

var yellowIcon = new BMap.Icon('/public/src/Partner/img/yellow_shut.png',new BMap.Size(30,30));

var redIcon = new BMap.Icon('/public/src/Partner/img/red_stop.png',new BMap.Size(30,30));

for(var i = 0;i < makerArr.length; i++){

var p0 = makerArr[i].point.split(",")[0];

var p1 = makerArr[i].point.split(",")[1];

var steelContent = '<div><p style="margin:0;line-height:1.2;font-size:13px;"><br/>经度：'+p0+'<br/>纬度：'+p1+

'<br/><br>设备名称：'+makerArr[i].title+'</br></p></div>';

var steelOpts = {

width : 80, //信息窗口宽度

height: 100, //信息窗口高度

title : "" , //信息窗口标题

enableMessage:true //设置允许信息窗发送短息

};

pointArray[i] = new BMap.Point(p0,p1);

maker[i] = createMaker(makerArr[i].state,pointArray[i],steelContent,steelOpts);

map.addOverlay(maker[i]);

};

function createMaker (state,point,content,option){

var maker = null;

if(state == 0){

maker = new BMap.Marker(point,{icon:greenIcon});

}else if(state == 1){

maker= new BMap.Marker(point,{icon:purpleIcon});

}else if(state == 2){

maker = new BMap.Marker(point,{icon:yellowIcon});

}else if(state == 3){

maker = new BMap.Marker(point,{icon:redIcon});

};

maker.addEventListener("mouseover",function(){

this.openInfoWindow(new BMap.InfoWindow(content, option));

});

maker.addEventListener("mouseout",function(){

this.closeInfoWindow();

});

return maker;

};

上述方式可以实现自定标注，鼠标经过覆盖物时，弹窗显示提示信息

还有一种方式：

使用PointCollection(),一个PointCollection只能显示一种图标，若要显示多种，则可以使用多个PointColletion.弹窗的信息可以通过点携带信息。

var pointArrayGreen = new Array();
var pointArrayPurple = new Array();
var pointArrayYellow = new Array();
var pointArrayRed = new Array();
var pointArray = new Array();

for(var i = 0;i < makerArr.length; i++){
var p0 = makerArr[i].point.split(",")[0];
var p1 = makerArr[i].point.split(",")[1];

3.BMap 自定义控件（左下角的标注信息）

// 定义一个控件类，即function

function ZoomControl(){

// 设置默认停靠位置和偏移量

this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;

this.defaultOffset = new BMap.Size(10, 400);

}

// 通过JavaScript的prototype属性继承于BMap.Control

ZoomControl.prototype = new BMap.Control();

ZoomControl.prototype.initialize = function(map){

var div = document.createElement("div");

// 添加文字说明

var div1 = div.appendChild(document.createElement("div"));

var img = document.createElement("img");

img.src = '/public/src/Partner/img/green_normal.png';

img.style.width = "16px";

img.style.height = "16px";

div1.appendChild(img);

div1.appendChild(document.createTextNode("正常设备"));

var div2 = div.appendChild(document.createElement("div"));

var img = document.createElement("img");

img.src = '/public/src/Partner/img/purple_offline.png';

img.style.width = "16px";

img.style.height = "16px";

div2.appendChild(img);

div2.appendChild(document.createTextNode("离线设备"));

div2.style.marginTop = "10px";

var div3 = div.appendChild(document.createElement("div"));

var img = document.createElement("img");

img.src = '/public/src/Partner/img/yellow_shut.png';

img.style.width = "16px";

img.style.height = "16px";

div3.appendChild(img);

div3.appendChild(document.createTextNode("断电设备"));

div3.style.marginTop = "10px";

var div4 = div.appendChild(document.createElement("div"));

var img = document.createElement("img");

img.src = '/public/src/Partner/img/red_stop.png';

img.style.width = "16px";

img.style.height = "16px";

div4.appendChild(img);

div4.appendChild(document.createTextNode("停运设备"));

div4.style.marginTop = "10px";

/*div.style.cursor = "pointer";

div.style.border = "1px solid gray";

div.style.backgroundColor = "white";*/

// 添加DOM元素到地图中

map.getContainer().appendChild(div);

// 将DOM元素返回

return div;

};

var myZoomCtrl = new ZoomControl();

// 添加到地图当中

map.addControl(myZoomCtrl);

4.Echarts 地图使用，样式多样化（全局图及局部图）

geo方式，设置option信息如下
bmap方式，option中如下

5.地图缩放级别根据坐标点自适应

function setZoom(bPoints) {
var view = map.getViewport(eval(bPoints));
var mapZo}传参为所有地图点的数组。

6.鼠标移到地图左下角自定义标注上市地图相应显示对应点

1.使用echarts的legend

2.自定义控件设置mouseover,mouseout事件

7.echart与BMap结合

<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=UGPStLSouCwqTsplymZXEaowiIl7wjUR"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>

sinat_20695925

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
JS 百度地图实现地图上显示多种自定义覆盖物

JS 百度地图实现地图上显示多种自定义覆盖物功能总结（可结合Echarts实现，多看api,能节省不少时间）实现效果图：1.BMap 坐标点添加自定义标注（Maker使用图片） 2.BMap 标注弹出信息提示框（使用InfoWindow） var pointArray = new Array(); var maker = new Array(); var g...
复制链接

扫一扫

专栏目录