百度地图根据缩放级别显示不同的marker点和窗口内容

最新推荐文章于 2023-07-14 15:35:57 发布

你过来呀啊

最新推荐文章于 2023-07-14 15:35:57 发布

阅读量6.7k

点赞数

文章标签：百度地图缩放 marker 窗口

本文链接：https://blog.csdn.net/qq_34815528/article/details/80424251

版权

var markers = [];

$(document).ready(function() {
getdata();
initMap();//显示地图
setInterval("frash()", 1000); //定时器，每3秒调用frash()

});
function getdata() {
markers=transArr({$list|json_encode=true});
school_markers = transArr({$school_list|json_encode=true});
console.log(school_markers);
}

function transArr(obj) {
var tem=[];
$.each(obj, function(i) {
tem[i]=obj[i];
});
return tem;
}

</script>
<script type="text/javascript">
//创建和初始化地图函数：
function initMap() {
//alert("111"+markers[0].lat);
createMap();//创建地图
setMapEvent();//设置地图事件
addMapControl();//向地图添加控件
addMapOverlay();//向地图添加覆盖物
}
function createMap() {
map = new BMap.Map("map"); //建树Map实例
map.centerAndZoom(new BMap.Point(110.337, 35.316), 6);// 建树点坐标,初始化地图,设置中心点坐标和地图级别。

map.setMapStyle({
styleJson: [{"featureType": "highway","elementType": "all","stylers": {
"visibility": "off"
}
}]
});


}
function setMapEvent() {
map.enableScrollWheelZoom();//启用地图滚轮放大缩小
map.enableKeyboard();//启用键盘上下左右键移动地图
map.enableDragging(); //启用地图拖拽事件，默认启用(可不写)
map.enableDoubleClickZoom()//启用鼠标双击放大，默认启用(可不写)
}
//点击事件
function addClickHandler(html,marker){
marker.addEventListener("click",function(e){
openInfo(""+html,e)});
}

function frash() {
map.clearOverlays();//清空地图上标注点
getdata(); //获得marker点的数组
addMapOverlay(); //将marker点的信息显示在地图上
markers.splice(0, markers.length);//清空数组
}
//设置点Icon
function addMapOverlay() {
var u = map.getZoom(); // 定义地图缩放等级的变量
console.log(u);
if (u <= 5) { // 如果缩放等级小于等于5
//把marker点的信息显示在地图上
for (var index = 0; index < markers.length; index++) {
//var point = new BMap.Point(markers[index].lng,markers[index].lat);
var p0 = markers[index].lng;
var p1 = markers[index].lat;
console.log("p0:"+p0);
var point = new BMap.Point(p0, p1);
var myIcon = new BMap.Icon("__STATIC__/image/room_position.png",new BMap.Size(40,40)); //assets/img/ict-mem04.png
var marker = new BMap.Marker(new BMap.Point(p0,p1), { icon: myIcon });
var html = [];
html.push('<ul style="table-layout:fixed;width:100%;font:15px arial,simsun,sans-serif">');
html.push('<li style="width:100%;list-style:none;height:30px;border-bottom:1px solid #DADADD;position:relative" id="mark_info"><span style="position:absolute;">地址：'+markers[index].zone_name+'</span></li>');

html.push('<li style="width:100%;list-style:none;padding-top:10px;padding-bottom:10px;border-bottom:0px solid #DADADD"><span style="position:absolute;">数量：'+markers[index].count+'</span></li>');

// html.push('<li style="width:100%;list-style:none;padding-top:10px;padding-bottom:10px;">商户地址：'+this.nearshoplist[i].address+'</li>');
html.push('</ul>');
var html = html.join("");
//console.log(html);

map.addOverlay(marker); // 将标注添加到地图中
addClickHandler(html,marker);
}
//地图缩放等级大于5不显示marker点
}else{
//把marker点的信息显示在地图上
for (var i = 0; i < school_markers.length; i++) {
//var point = new BMap.Point(markers[index].lng,markers[index].lat);
var p0 = school_markers[i].lng;
var p1 = school_markers[i].lat;
console.log("p0:"+p0);
var point = new BMap.Point(p0, p1);
var myIcon = new BMap.Icon("__STATIC__/image/red_icon.png",new BMap.Size(40,30)); //assets/img/ict-mem04.png
var marker = new BMap.Marker(new BMap.Point(p0,p1), { icon: myIcon });
var html = [];
html.push('<ul style="table-layout:fixed;width:100%;font:15px arial,simsun,sans-serif">');
html.push('<li style="width:100%;list-style:none;height:30px;border-bottom:1px solid #DADADD;position:relative" id="mark_info"><span style="position:absolute;">地址：'+school_markers[i].school_name+'</span></li>');

html.push('<li style="width:100%;list-style:none;padding-top:10px;padding-bottom:10px;border-bottom:0px solid #DADADD"><span style="position:absolute;">数量：'+school_markers[i].school_name+'</span></li>');

// html.push('<li style="width:100%;list-style:none;padding-top:10px;padding-bottom:10px;">商户地址：'+this.nearshoplist[i].address+'</li>');
html.push('</ul>');
var html = html.join("");
//console.log(html);

map.addOverlay(marker); // 将标注添加到地图中
addClickHandler(html,marker);
}
}

}

//生成窗体
function openInfo(html,e){
var p = e.target;
console.log("lng:"+p.getPosition().lng);
console.log("lat:"+p.getPosition().lat);
var opts = {
width : 100 // 信息窗口宽度
//height: 80, // 信息窗口高度
//title : "信息窗口" , // 信息窗口标题
// enableMessage:true//设置允许信息窗发送短息
};
var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
var infoWindow = new BMap.InfoWindow(html,opts); // 创建信息窗口对象
map.openInfoWindow(infoWindow,point); //开启信息窗口
}

//向地图添加控件
function addMapControl() {
var scaleControl = new BMap.ScaleControl({
anchor : BMAP_ANCHOR_BOTTOM_LEFT
});
scaleControl.setUnit(BMAP_UNIT_IMPERIAL);
map.addControl(scaleControl);
var navControl = new BMap.NavigationControl({
anchor : BMAP_ANCHOR_TOP_LEFT,
type : BMAP_NAVIGATION_CONTROL_LARGE
});
map.addControl(navControl);
var overviewControl = new BMap.OverviewMapControl({
anchor : BMAP_ANCHOR_BOTTOM_RIGHT,
isOpen : true
});
map.addControl(overviewControl);
}
var map;
// initMap();