87,922
社区成员
发帖
与我相关
我的任务
分享百度地图api 根据缩放级别 显示隐藏覆盖物标题文本
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>百度地图API显示多个标注点带提示的代码</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=M6Z0Obru4jwGswmc9jgXniyO"></script>
</head>
<body>
<div class="card">
<div style="width:98%;height:650px;border:#ccc solid 1px;font-size:12px; margin: 20px auto;" id="map"></div>
</div>
<script type="text/javascript">
//创建和初始化地图函数：
function initMap() {
createMap();//创建地图
setMapEvent();//设置地图事件
addMapControl();//向地图添加控件
addMapOverlay();//向地图添加覆盖物
}
function createMap() {
map = new BMap.Map("map");
map.centerAndZoom(new BMap.Point(114.604748, 38.05118), 13);
function myFun(result) {
var cityName = result.name;
map.setCenter("cityName");
//alert("当前定位城市:" + cityName);
}
var myCity = new BMap.LocalCity();
myCity.get(myFun);
}
function setMapEvent() {
map.enableScrollWheelZoom();
map.enableKeyboard();
map.enableDragging();
map.enableDoubleClickZoom()
}
function addClickHandler(target,poi, window) {
//pop弹窗标题
var title = '<div style="font-weight:bold;color:#CE5521;font-size:14px">' + poi.title + '</div>';
//pop弹窗信息
var html = [];
html.push('<table cellspacing="0" style="table-layout:fixed;width:100%;font:12px arial,simsun,sans-serif"><tbody>');
html.push('<tr>');
html.push('<td style="vertical-align:top;width:38px;white-space:nowrap;word-break:keep-all">建设内容:</td>');
html.push('<tr>');
html.push('<td style="text-align:left;">' + poi.content + ' </td>');
html.push('</tr>');
html.push('</tbody></table>');
var infoWindow = new BMap.InfoWindow(html.join(""), { title: title, width: 200 });
target.addEventListener("click", function () {
target.openInfoWindow(infoWindow);
});
map.addEventListener("zoomend", function () {
var DiTu = this.getZoom();
var allOverlay = map.getOverlays();
if (DiTu >= 13)
{
for (var i = 0; i < allOverlay.length - 1 ; i++) {
if (allOverlay[i].toString() == "[object Marker]")
{
}
}
}
else
{
}
//map.removeEventListener("zoomend", showInfo);
});
}
function addMapOverlay() {
var markers = [
{MingCheng: "1(前期项目)", content: "<p style='text-align:right;'>1</p>", title: "<a href='/Admin/Project/pro_qqdetails.aspx?ID=581&PageUrl=/Admin/Project/map.aspx'>1</a>(前期项目)", imageOffset: { width: -23, height: -21 }, position: { lat: 37.983687, lng: 114.639084 } },{MingCheng: "19(前期项目)", content: "<p style='text-align:right;'>9</p>", title: "<a href='/Admin/Project/pro_qqdetails.aspx?ID=582&PageUrl=/Admin/Project/map.aspx'>19</a>(前期项目)", imageOffset: { width: -23, height: -21 }, position: { lat: 37.975951, lng: 114.603152 } }
];
for (var index = 0; index < markers.length; index++) {
var point = new BMap.Point(markers[index].position.lng, markers[index].position.lat);
var marker = new BMap.Marker(point, {
icon: new BMap.Icon("http://api.map.baidu.com/lbsapi/createmap/images/icon.png", new BMap.Size(20, 25), {
imageOffset: new BMap.Size(markers[index].imageOffset.width, markers[index].imageOffset.height)
})
});
var label = new BMap.Label(markers[index].title, { offset: new BMap.Size(25, 5) });
var opts = {
width: 200,
title: markers[index].title,
enableMessage: false
};
var infoWindow = new BMap.InfoWindow(markers[index].content, opts);
marker.setLabel(label);
marker.setTitle(markers[index].MingCheng);
addClickHandler(marker,markers[index], infoWindow);
map.addOverlay(marker);
};
}
//向地图添加控件
function addMapControl() {
//添加城市查询 start
var size = new BMap.Size(10, 20);
map.addControl(new BMap.CityListControl({
anchor: BMAP_ANCHOR_TOP_LEFT,
offset: size,
}));
//添加城市查询 end
//比例尺 start
var scaleControl = new BMap.ScaleControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT });
scaleControl.setUnit(BMAP_UNIT_IMPERIAL);
map.addControl(scaleControl);
//比例尺 end
//比例尺控件 start
//var navControl = new BMap.NavigationControl({ anchor: BMAP_ANCHOR_TOP_LEFT, type: BMAP_NAVIGATION_CONTROL_LARGE });
//map.addControl(navControl);
//比例尺控件 end
//小地图 start
var overviewControl = new BMap.OverviewMapControl({ anchor: BMAP_ANCHOR_BOTTOM_RIGHT, isOpen: true });
map.addControl(overviewControl);
//小地图 end
}
var map;
initMap();
</script>
</body>
</html>
我有一个监听事件，里面可以得到缩放级别和Marker覆盖物，如果缩放级别大于等于13的时候，我想让这个覆盖物的文本标题隐藏。
在这里我该怎么做？？
求解答！！！
...全文
请发表友善的回复…
发表回复
程大大 2017-07-07
- 打赏
- 举报
map.addEventListener("zoomend", function() {
var zoomLevel = this.getZoom();
console.log (zoomLevel);
var allOverlay = map.getOverlays();
if(zoomLevel >= 9) {
allOverlay.forEach(function(marker) {
marker.hide();
})
} else {
allOverlay.forEach(function(marker) {
marker.show();
})
}
});
zhangjun111111112 2016-04-26
- 打赏
- 举报
哥们能共享一下解决方法吗？
zhang271123288 2016-03-31
- 打赏
- 举报
谢谢回复
zhang271123288 2016-03-31
- 打赏
- 举报
谢了，完美解决问题
Go 旅城通票 2016-03-29
- 打赏
- 举报
导入jquery框架，然后给你的label里面的title连接a增加islabel样式，然后zoomend改这样就行了
map.addEventListener("zoomend", function () {
var DiTu = this.getZoom();
$('a.islabel').parent()[DiTu>=13?'hide':'show']();
});
var markers = [
{ MingCheng: "1(前期项目)", content: "<p style='text-align:right;'>1</p>", title: "<a class='islabel' href='/Admin/Project/pro_qqdetails.aspx?ID=581&PageUrl=/Admin/Project/map.aspx'>1</a>(前期项目)", imageOffset: { width: -23, height: -21 }, position: { lat: 37.983687, lng: 114.639084 } }, { MingCheng: "19(前期项目)", content: "<p style='text-align:right;'>9</p>", title: "<a class='islabel' href='/Admin/Project/pro_qqdetails.aspx?ID=582&PageUrl=/Admin/Project/map.aspx'>19</a>(前期项目)", imageOffset: { width: -23, height: -21 }, position: { lat: 37.975951, lng: 114.603152 } }
];
LinTx_ 2016-03-29
- 打赏
- 举报
marker.getLabel().setStyle({display:"none"})
marker.getLabel().setStyle({display:"block"})
zhang271123288 2016-03-29
- 打赏
- 举报
人呢？难道我发错板块了？
