百度地图添加图层显示时验证图层是否存在
百度地图开发常用网站1、百度地图开放平台http://lbsyun.baidu.com/2、百度地图Javascript APIJavaScript API v3.0http://lbsyun.baidu.com/index.php?title=jspopular3.0JavaScript API v2.0http://lbsyun.baidu.com/ind...
·
百度地图开发常用网站
1、百度地图开放平台
http://lbsyun.baidu.com/
2、百度地图 Javascript API
-
JavaScript API v3.0 http://lbsyun.baidu.com/index.php?title=jspopular3.0
-
JavaScript API v2.0 http://lbsyun.baidu.com/index.php?title=jspopular
-
JavaScript API Lite http://lbsyun.baidu.com/index.php?title=jspopularLiteV1
3、JavaScript API v2.0类参考
http://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference.html
4、百度地图示例DEMO（JavaScript API v2.0）
http://lbsyun.baidu.com/jsdemo.htm#a1_2
5、百度地图 ak 申请：（JavaScript API v2.0）
http://lbsyun.baidu.com/index.php?title=jspopular/guide/getkey
6、开源库（JavaScript API v2.0）：鼠标绘制工具条、热力图、聚合marker、测距工具、自定义覆盖物、自定义信息窗口、路书等功能
http://lbsyun.baidu.com/index.php?title=jspopular/openlibrary
7、百度地图坐标拾取系统
http://api.map.baidu.com/lbsapi/getpoint/index.html
说明
项目中使用 JavaScript API v2.0 版本，当然也可以使用最新版 V3.0。
JavaScript API Lite是移动端浏览器上构建地图应用
百度地图添加图层显示时验证图层是否存在
1、百度地图 ak 申请：（JavaScript API v2.0）
http://lbsyun.baidu.com/index.php?title=jspopular/guide/getkey
2、实现效果图如下：
当再次添加相同的内容时，系统会提示图层已经标注在地图上。不再重复添加图层。
动态图
3、网页源码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>百度地图添加图层显示时验证是否存在</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你在百度地图开放平台申请的ak"></script>
<!-- 你在百度地图开放平台申请的ak -->
</head>
<body>
<div style="position: absolute;z-index: 10;left: 180px;">
<input type="button" value="添加图层" id="addMarkerBtn" />
</div>
<div id="allmap" style="position: absolute; width: 100%; top: 0px; bottom: 0px"></div>
<script type="text/javascript">
//marker标签偏移量
var searchPosiMarkerOffset = 10000;
//添加验证是否已经标注信息,已经存在不再标注，给出提示信息
function existsSearchPosiMarker(id, searchPosiMarkerOffset, point) {
var existsMarker = false;
//获得地图上所有的图层信息
var allOverlay = map.getOverlays();
var length = allOverlay.length;
for (var i = 0; i < length; i++) {
//判断是否是marker对象，这里可以根据自己的需求进行处理，我们添加图层时一般都使用marker对象
if (allOverlay[i] instanceof BMap.Marker) {
var currentMarker = allOverlay[i];
var currentMarkerZIndex = currentMarker.zIndex;
var showMarerZindex = parseInt(id) + searchPosiMarkerOffset;
if (currentMarkerZIndex && currentMarkerZIndex == showMarerZindex) {
currentMarker.setPosition(point);
map.panTo(point);
var existsMarker = true;
break;
} else {
continue
}
}
}
return existsMarker;
}
//添加显示图层显示： 验证图层是否存在
function addMarker(id , marker ) {
//获取当前图层的点坐标
var currentPoint = marker.getPosition();
//添加验证是否已经标注单位信息, 已经存在不再标注，给出提示信息
var existsMarker = existsSearchPosiMarker(id, searchPosiMarkerOffset, currentPoint);
if (existsMarker == true) {
window.alert('地图上已经标注该图层！');
return false;
}
//图层展示，marker标签偏移量 var searchPosiMarkerOffset = 10000;
var currentZIndex = parseInt(id) + searchPosiMarkerOffset;//currentZIndex值必须唯一，用于每次添加图层时验证图层是否存在
marker.setZIndex(currentZIndex);
map.panTo(point);
map.addOverlay(marker);
}
//红色
var icon_red = new BMap.Icon("img/icon_red.png", new BMap.Size(24, 35), { anchor: new BMap.Size(0, 0) });
//蓝色（高亮）
var icon_highlight = new BMap.Icon("img/icon_highlight.png", new BMap.Size(24, 35), { anchor: new BMap.Size(0, 0) });
//绿色
var icon_green = new BMap.Icon("img/icon_green.png", new BMap.Size(24, 35), { anchor: new BMap.Size(0, 0) });
var map = new BMap.Map("allmap", { minZoom: 9, maxZoom: 19 });
var point = new BMap.Point(116.128554, 24.294562);
var top_left_navigation = new BMap.NavigationControl();
map.addControl(top_left_navigation);// 添加平移缩放控件
map.addControl(new BMap.ScaleControl({ anchor: BMAP_ANCHOR_TOP_LEFT })); // 添加比例尺控件
map.addControl(new BMap.OverviewMapControl()); //添加缩略地图控件
map.enableScrollWheelZoom();//启用滚轮放大缩小
map.centerAndZoom(point, 9);
var bmp_type = new BMap.MapTypeControl({ anchor: BMAP_ANCHOR_TOP_RIGHT });
map.addControl(bmp_type);
var styleOptions = {
strokeColor: "red", //边线颜色。
fillColor: "red", //填充颜色。当参数为空时，圆形将没有填充效果。
strokeWeight: 3, //边线的宽度，以像素为单位。
strokeOpacity: 0.8, //边线透明度，取值范围0 - 1。
fillOpacity: 0.6, //填充的透明度，取值范围0 - 1。
strokeStyle: 'solid' //边线的样式，solid或dashed。
}
map.disableDoubleClickZoom();
//使用不同的颜色显示标签
//红色图标显示图层1
var marker1 = new BMap.Marker(point, { icon: icon_red, offset: new BMap.Size(0, 0) });
var label1 = new BMap.Label("这是红色图标显示的标签内容", { offset: new BMap.Size(30, 0) });
label1.setStyle({color: "red",fontSize: "12px",height: "20px",lineHeight: "20px",fontFamily: "微软雅黑"});
label1.hide();
marker1.setLabel(label1);
//设置图层可以被拖动
marker1.enableDragging();
//添加显示图层显示： 验证图层是否存在
addMarker(1 , marker1 );
//绿色图标显示图层2
var point2 = new BMap.Point(116.328554, 24.594562);//图层2的坐标
var marker2 = new BMap.Marker(point2, { icon: icon_green, offset: new BMap.Size(0, 0) });
var label2 = new BMap.Label("这是绿色图标显示的标签内容", { offset: new BMap.Size(30, 0) });
label2.setStyle({color: "red",fontSize: "12px",height: "20px",lineHeight: "20px",fontFamily: "微软雅黑"});
label2.hide();
marker2.setLabel(label2);
//设置图层可以被拖动
marker2.enableDragging();
//添加显示图层显示： 验证图层是否存在
addMarker(2 , marker2 );
//往地图中添加图层
//map.addOverlay(marker1);
//map.addOverlay(marker2);
//添加按钮点击事件
var addMarkerBtn = document.getElementById("addMarkerBtn");
addMarkerBtn.onclick = function(){
alert("您点击了添加图层");
var point3 = new BMap.Point(115.328554, 23.594562);//图层2的坐标
var marker3 = new BMap.Marker(point3, { icon: icon_red, offset: new BMap.Size(0, 0) });
var label3 = new BMap.Label("这是手动添加图层显示的标签内容", { offset: new BMap.Size(30, 0) });
label3.setStyle({color: "red",fontSize: "12px",height: "20px",lineHeight: "20px",fontFamily: "微软雅黑"});
marker3.setLabel(label3);
//设置图层可以被拖动
marker3.enableDragging();
//添加显示图层显示： 验证图层是否存在
addMarker(3 , marker3 );
}
</script>
</body>
</html>
源码已经打包到百度云盘，下载地址：
链接：https://pan.baidu.com/s/1RXMkeJrSh4eEiRUZPkyFIA
提取码：qdaf
CSDN联合极客时间，共同打造面向开发者的精品内容学习社区，助力成长！
更多推荐
0
0- 0
已为社区贡献12条内容
所有评论(0)