美文网首页
百度地图多个点添加标注(自定义标注)

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

作者: 我的楼兰0909 | 来源:发表于2019-02-22 18:15 被阅读0次
    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);
    

    相关文章

      网友评论

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

          本文链接:https://www.haomeiwen.com/subject/cwxyyqtx.html