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

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


实现代码:

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());
});
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值