百度地图多点聚合(标注与信息窗口)最佳视野

xiaoxiao2021-02-28  157

根据数据的经纬度,在百度地图上标注坐标点,并且有数据的列表,通过点击列表在对应的百度地图上进行标注点的信息提示。效果图如下:

实现代码:

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()); });
转载请注明原文地址: https://www.6miu.com/read-17819.html

最新回复(0)