 

当前位置：Ddmit  后端  正文

百度地图标注管理器使用

2019-02-11 分类：后端阅读(1660) 评论(0) 赞(0)

百度地图标注批量管理：


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>

<title>百度地图标注管理器</title>
</head>
<body>
    <div style="width:550px;height:450px;border:1px solid gray;" id="container"></div>
    <button id="clearMarkers">clearMarkers</button>
    <button id="show">show markers</button>
    <button id="hide">hide markers</button>
    <button id="toggle">toggle markers</button>
<script type="text/javascript" src="MarkerManager.js"></script>
<script type="text/javascript">

    //初始化地图
    var map = new BMap.Map("container");
    var point = new BMap.Point(116.404, 39.915);
    map.centerAndZoom(point,15);
    map.enableScrollWheelZoom();

    var padding = 200;
    var mgr = new BMapLib.MarkerManager(map,{
        borderPadding: padding
        ,maxZoom: 18
        ,trackMarkers: true
    });

    //定义不同缩放比例下显示的marker数量
    var markersConfig = [{minZoom: 1, maxZoom: 10, markerCount:80 }
        ,{minZoom: 11, maxZoom: 12, markerCount:10 }
        ,{minZoom: 13, maxZoom: 15, markerCount:150 }
        ,{minZoom: 16, maxZoom: 17, markerCount:10 }
        ,{minZoom: 18, maxZoom: 19, markerCount:100 }
    ];

    //为每个不同缩放比例下创建marker
    for(var i in markersConfig){
        var t = markersConfig[i];
        var mks = getRandomMarker(map,t.markerCount,padding);
        //增加不同缩放比例的marker
        mgr.addMarkers(mks,t.minZoom,t.maxZoom)
     }

    mgr.showMarkers();

    map.addEventListener("zoomend",function(){
            console.log('监听缩放');
    });

    map.addEventListener("dragend",function(){
            console.log('监听地图拖拽');
    });

    $("clearMarkers").onclick = function(){
        mgr.clearMarkers();
    }
    $("show").onclick = function(){
        mgr.show();
    }
    $("hide").onclick = function(){
        mgr.hide();
    }
    $("toggle").onclick = function(){
        mgr.toggle();
    }

    /**
     * 随机生成marker
     * @param {Map} map 地图map对象
     * @param {Number} num 要产生的marker的数量
     * @param {Boolean} isInViewport 是否需要只在视口中的marker
     * @return {Array} marker的数组集合
     */
    function getRandomMarker(map,num,borderPadding){
        var container = map.getContainer()
        , markers = []
        , height = parseInt(container.offsetHeight,10) / 2  + borderPadding
        , width = parseInt(container.offsetWidth,10) / 2  + borderPadding;

        var center = map.getCenter(), pixel = map.pointToPixel(center);
        var realBounds = mgr._getRealBounds();
        //随机一个新的坐标，不超过地图+borderPadding范围
        for(var i = num; i--;){
            var w = width * Math.random(), h = height * Math.random();
            var newPixel = { x : pixel.x + (Math.random() > 0.5 ? w : -w),
                           y : pixel.y + (Math.random() > 0.5 ? h : -h)}
            , newPoint = map.pixelToPoint(newPixel);

            var marker = new BMap.Marker(newPoint);

            if(realBounds.containsPoint(newPoint)){
                markers.push(marker);
                (function(mk){
                    mk.addEventListener("dblclick",function(){
                            mgr.removeMarker(mk);
                        });
                })(marker);
            }
        }
        return markers;
    }

    /**
     * 根据id获取dom元素
     * @param {String} id 元素ID
     * @return none
     *
     */
    function $(id){
        return document.getElementById(id);
    }

</script>
</body>
</html>

赞(0)

未经允许不得转载：Ddmit » 百度地图标注管理器使用

分享到

相关推荐

评论抢沙发