根据数据的经纬度,在百度地图上标注坐标点,并且有数据的列表,通过点击列表在对应的百度地图上进行标注点的信息提示。效果图如下:
实现代码:
var map = new BMap.Map("map"); var marker = new Array(); var text = new Array(); map.centerAndZoom(new BMap.Point(116.404, 39.915), 16); function addMarker(point,abc,content) { marker[abc] = new BMap.Marker(point); map.addOverlay(marker[abc]); var label = new BMap.Label(abc,{"offset":new BMap.Size(5,2)}); label.setStyle({ color : "white",border : "none",background : "none"}); marker[abc].setLabel(label); text[abc] = content; var infoWindow = new BMap.InfoWindow(text[abc],{enableMessage:false}); marker[abc].addEventListener("click", function(){this.openInfoWindow(infoWindow);}); } function clickMarker(abc) { var infoWindow = new BMap.InfoWindow(text[abc],{enableMessage:false}); marker[abc].openInfoWindow(infoWindow); } $(document).ready(function(){ var points = new Array(); var i = 0; <?php $i = 0; if(!empty($lists)): $abc = 'A'; foreach($lists as $v): if($session): $content = '<div style="margin:0;line-height:20px;padding:2px;"><h3>'.$v['sp_name'].'</h3>地址:'.$v['address'].'<br/>电话:'.$v['phone'].'</div>'; else: $content = '<div style="margin:0;line-height:20px;padding:2px;"><h3>'.$v['sp_name'].'</h3>地址:'.$v['address'].'</div>'; endif; ?> var point = new BMap.Point("<?php echo $v['lng_baidu'];?>","<?php echo $v['lat_baidu'];?>"); points[i] = point; addMarker(point,'<?php echo $abc;?>','<?php echo $content;?>'); i++; <?php $abc++; endforeach; endif; ?> if( points != '' ) { map.centerAndZoom(points[5], 16); map.setViewport(points); } map.addControl(new BMap.NavigationControl()); });