Baidu map - Point polymerization pop event +

Record each pit, pit

Currently doing a project such as Baidu map contact point aggregated demand, the old rules, see the document notes.

0. Other

1. Point polymerization

Point polymerization (MarkerClusterer polymerizer marker) to solve the problem to load a large number of feature points to generate a map covering the phenomenon, and improve performance.

Baidu map - aggregation point

2. Simple examples

HTML \ CSS

<style>
    body, html {width: 100%;height: 100%;margin: 0;font-family: "微软雅黑";}
    #allmap {width: 100%;height: 500px;}
    p {margin-left: 5px;font-size: 14px;}
    /*隐藏百度logo*/
    .anchorBL a img{display: none;}
    .anchorBL span span{display: none;}
</style>

<body style="min-height: 100%;">
   <div id="allmap"></div>
</body>

JS
1. Enable point aggregation function, wherein the data may be acquired on demand asynchronously, the data obtained should be horizontal and vertical coordinates
2. You can turn on location, to reach every time you open the map quickly navigate to the relevant location

<script type="text/javascript" 
       src="http://api.map.baidu.com/api?v=2.0&ak=密钥"></script>
<script type="text/javascript"
        src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>
<script type="text/javascript"
        src="http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>
<script>
    // 百度地图API功能
    var map = new BMap.Map("allmap");
    var point = new BMap.Point(116.331398,39.897445);
    map.centerAndZoom(point,6);
    //启用滚轮放大缩小
    map.enableScrollWheelZoom(true);

    // 相关数据(也可以根据需求异步获取）
    // 可以确定的是每条数据应要有横纵坐标
    var data = [{"mapy": "32.94584", "mapx": "112.894350", "time": "12:30"},
        {"mapy": "33.34683", "mapx": "112.694300", "time": "11:30"},
        {"mapy": "33.54702", "mapx": "112.094380", "time": "10:30"},
        {"mapy": "33.148780", "mapx": "116.494390", "time": "13:30"}
    ];

    var markers = [];

    // 遍历得到的数据
    $.each(data, function (i, item) {
        // 横纵坐标定点
        var point = new BMap.Point(item.mapx, item.mapy);
        var marker = new BMap.Marker(point);
        // 获取数据
        var content = item.time;
        // 添加点击事件
        //addClickHandler(content, marker);

        markers.push(marker);

    });

    // 根据ip定位
    function myFun(result){
        var cityName = result.name;
        map.setCenter(cityName);
        console.log("当前定位城市:"+cityName);
    }
    var myCity = new BMap.LocalCity();
    myCity.get(myFun);

    // 添加点聚合效果
    var markerClusterer = new BMapLib.MarkerClusterer(map, {markers: markers});
</script>

Modify the style of aggregation points
if they feel the default style does not look good, or have special needs, you can customize the style points

// 添加点聚合效果
    var markerClusterer = new BMapLib.MarkerClusterer(map, {
        markers: markers,
       //最小的聚合数量，小于该数量的不能成为一个聚合，默认为2
        minClusterSize: 2, 
        styles: [{
           // 此处URL不知道能否用本地图片，自己试了一下不能，待解答！
            url: 'dist/img/smallred.png',
            size: new BMap.Size(0, 0)
        }]
    });

3. Add the click event

You will need to add a click event for each point under normal circumstances, such as pop-pop display information

Pop-ups

Add a click event

// 添加点击事件,可在循环数据时调用
    function addClickHandler(content, marker) {
        marker.addEventListener("click", function (e) {
                openInfo(content, e)
            }
        );
    }

Pop-ups
1. openInfo(content, e), Where you can pass parameters needs;
2. var infoWindow = new BMap.InfoWindow( 拼接数据 , opts);, Where splicing can customize the parameters;

// 弹窗
    var opts = {
        width: 270, // 信息窗口宽度
        height: 100, // 信息窗口高度
        enableMessage: true//设置允许信息窗发送短息
    };

    // 弹窗点击事件
    function openInfo(content, e) {
        var p = e.target;
        var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
        // 创建信息窗口对象
        var infoWindow = new BMap.InfoWindow(`<div>自定义内容</div><div>${content}</div>` , opts);
        //开启信息窗口
        map.openInfoWindow(infoWindow, point);
    }

4. End

1. The more complex requirements did not come into contact with, before finishing so much.
2. During the pop part would like to combine layer to do, but failed, the error is: not a correct node, layer is encapsulated may not.
3. Place the layer components on "BMap.InfoWindow (layer components, opts)" The first argument is invoked, but the background error, and finally gave up the idea.

Point a praise chant!

Baidu map - Point polymerization pop event +

Record each pit, pit

0. Other

1. Point polymerization

2. Simple examples

3. Add the click event

4. End

Guess you like