百度地图展示标记物和标签信息

作者:谢高升 发布:2017-11-20 浏览:2558次

百度地图展示标记物和标签信息;使用百度地图根据经纬度展示设备的安装位置,以及标签信息展示;

点击图标查看详细信息

<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的标签

image.png

标签: 百度地图