百度地图多个点添加标注(自定义标注)

2019-02-22  本文已影响0人  我的楼兰0909
var opts = {
        maxWidth:200,
        minHeight:20
    }

    function addClickHandler(content,marker){
        marker.addEventListener("click",function(e){
            openInfo(content,e)}
        );
    }

    function openInfo(content,e){
        var p = e.target;
        var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
        var infoWindow = new BMap.InfoWindow(content, opts);  // 创建信息窗口对象
        map.openInfoWindow(infoWindow,point); //开启信息窗口
    }


    // 百度地图API功能
    var map = new BMap.Map("mymap_hotel");
    function setMap(map) {
        var data_info = $('.hlist').text();
        if(data_info){
            data_info =  JSON.parse(data_info);
            map.clearOverlays();//清空地图上标注点
            map.centerAndZoom(new BMap.Point(data_info[0][0],data_info[0][1]), 15);
            var size = new BMap.Size(32,32);
            //http://t.uysly.com/res/images/hotel/hos_101.png
            for(var i=0;i<data_info.length;i++){
                var myIcon = new BMap.Icon('http://t.uysly.com/res/images/hotel/local_icon'+(i+1)+'.png',size);
                var marker = new BMap.Marker(new BMap.Point(data_info[i][0],data_info[i][1]),{icon:myIcon});  // 创建标注
                var content = data_info[i][2];
                map.addOverlay(marker);               // 将标注添加到地图中
                addClickHandler(content,marker);
            }
        }
        map.enableScrollWheelZoom(true);//开启鼠标滚轮缩放
    }
    setMap(map);
上一篇下一篇

猜你喜欢

热点阅读