百度地图API的使用

百度地图API的使用

打点、海量图、点聚合

• 打点
• 海量图
• 点聚合

---

打点

<script type="text/javascript">
    // 百度地图API功能
    var map = new BMap.Map("allmap");
    var point = new BMap.Point(116.404, 39.915);
    map.centerAndZoom(point, 15);
    // 编写自定义函数,创建标注
    function addMarker(point){
      var marker = new BMap.Marker(point);
      map.addOverlay(marker);
    }
    // 随机向地图添加25个标注
    var bounds = map.getBounds();
    var sw = bounds.getSouthWest();
    var ne = bounds.getNorthEast();
    var lngSpan = Math.abs(sw.lng - ne.lng);
    var latSpan = Math.abs(ne.lat - sw.lat);
    for (var i = 0; i < 25; i ++) {
        var point = new BMap.Point(sw.lng + lngSpan * (Math.random() * 0.7), ne.lat - latSpan * (Math.random() * 0.7));
        addMarker(point);
    }
</script>

这种每个标注点渲染的方式非常慢，几百个点浏览器就会假死

海量图

// 向地图添加标注
 points.push(new BMap.Point(user.lng, user.lat));
var options = {
        size: BMAP_POINT_SIZE_SMALL,
        shape: BMAP_POINT_SHAPE_STAR,
        color: '#d340c3'
 }
 var pointCollection = new BMap.PointCollection(points, options);
 map.addOverlay(pointCollection);

海量图的效率非常快，但是因为在添加海量图前，已经在地图上加了多边形覆盖物，尝试过调整层级，但是依然影响多边形的双击监听事件

点聚合

for (var i = 0; i < userExInfoList.length; i++) {
        var user = userExInfoList[i];
        // map.clearOverlays();
         if(user.lng!= null && user.lat != null){
             markers.push(new BMap.Marker(point));
         }
 }
 //最简单的用法，生成一个marker数组，然后调用markerClusterer类即可。
var markerClusterer = new BMapLib.MarkerClusterer(map, {markers:markers});


<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=G1qcYAT3eYiTBK9PeenB1SL9"></script>
<script type="text/javascript"
        src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
<link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css"/>
<script type="text/javascript" src="http://api.map.baidu.com/library/DistanceTool/1.2/src/DistanceTool_min.js"></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>

点聚合，渲染效率快，且不影响多边形的双击监听事件，但是点分布并不是一目了然