百度地图展示标记物和标签信息;使用百度地图根据经纬度展示设备的安装位置,以及标签信息展示;
点击图标查看详细信息
<div class="row">
<div class="col-xs-12">
<div>
<div id="allmap"></div>
</div>
</div>
<script type="text/javascript">
// 百度地图API功能
<notempty name="province">
center = "{$province.location_name}";
<else />
center = '中国';
</notempty>
<notempty name="city">
center = "{$city.location_name}";
</notempty>
var map = new BMap.Map("allmap");
<!-- var point = new BMap.Point(103.388611, 35.563611); -->
<!-- map.centerAndZoom(point, 5); -->
// alert(center);
map.centerAndZoom(center,15);
// 编写自定义函数,创建标注
function addMarker(point,name,address,mac){
var marker = new BMap.Marker(point);
map.addOverlay(marker);
var label = new BMap.Label(name,{offset:new BMap.Size(30,-30)});
label.setStyle({
color : "red",
fontSize : "14px",
height : "35px",
lineHeight : "35px",
fontFamily:"微软雅黑",
position: "relative",
});
marker.setLabel(label);
var opts = {
width : 200, // 信息窗口宽度
height: 100, // 信息窗口高度
title : "店铺名称:"+name , // 信息窗口标题
enableMessage:true,//设置允许信息窗发送短息
message:"message"
}
marker.setAnimation(BMAP_ANIMATION_BOUNCE);//图标跳动
var infoWindow =
new BMap.InfoWindow("mac:"+mac+"<br/>地址:"+address , opts); // 创建信息窗口对象
marker.addEventListener("click", function(){
map.openInfoWindow(infoWindow,point); //开启信息窗口
});
}
<foreach name="pointlist" item="v">
var lng = "{$v.lng}";
var lat = "{$v.lat}";
if(lng == '' || lat == ''){
lat = 0;
lng =0;
}
var point = new BMap.Point(lng ,lat);
addMarker(point,"{$v.shop_name}","{$v.address}","{$v.dev_mac}");
</foreach>
map.enableScrollWheelZoom(); //启用滚轮放大缩小,默认禁用
map.enableContinuousZoom(); //启用地图惯性拖拽,默认禁用
</script><notempty>
<foreach> 是thinkphp的标签
