百度地图api 渲染大量标注 显示信息框 使用MarkerClusterer

1、效果图

2、话不多说,沾代码,换ak,好使就完事了(不知道ak,看后边)

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <style type="text/css">
        body,
        html,
        #allmap {
     
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
            font-family: "微软雅黑";
        }
    </style>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script type="text/javascript"
            src="http://api.map.baidu.com/api?v=2.0&ak=“换成你的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>
    <title>标注优化,显示信息框</title>
</head>

<body>
<div id="allmap"></div>
</body>
<script type="text/javascript">
/*    let Arr = [
        [121.569999695, 16.2399997711],
        [121.569999695, 16.2399997711],
        [121.489997864, 16.3199996948]
    ];*/
    var map = new BMap.Map("allmap");
    map.centerAndZoom(new BMap.Point(116.404, 39.915), 1);//中心城市
    map.enableScrollWheelZoom();
    /*————————设置信息框基本属性1————————*/
    var opts = {
     
        width : 250,     // 信息窗口宽度
        height: 120,     // 信息窗口高度
        title : "设备信息" , // 信息窗口标题
        enableMessage:true//设置允许信息窗发送短息
    };
    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); //开启信息窗口
    }
    /*————————设置信息框基本属性2————————*/

    // 生成随机经纬度数据(替换成ajax访问即可)
    var MAX = 1000;
    var markers = [];
    var point = null;
    var i = 0;
    for (; i < MAX; i++) {
     
        point = new BMap.Point(Math.random() * 40 + 85, Math.random() * 30 + 21);
        //不需要信息框
        // var marker = new BMap.Marker(point);
        /*—————需要信息框———————*/
        var marker = new BMap.Marker(point,{
     
            icon: new BMap.Symbol(BMap_Symbol_SHAPE_CIRCLE, {
     
                scale: 6,
                rotation: 0,
                fillColor: "red",
                fillOpacity: 1,
                strokeColor: "red",
                strokeOpacity: 0.1,
                strokeWeight: 15
            })
        });
        addClickHandler("设备编号:" + i + "
设备类型:"
+ i + "
电量:"
+ i,marker); /*—————需要信息框———————*/ markers.push(marker); } var markerClusterer = new BMapLib.MarkerClusterer(map, { markers:markers}); </script> </html>

3、如果你是个百度地图api小白,看下边

①、官网:

http://lbsyun.baidu.com/
你注册开发者账号就知道ak是什么了
因为使用的web,所以选红框这个,里边说明书的第一节就是教你注册
百度地图api 渲染大量标注 显示信息框 使用MarkerClusterer_第1张图片

②、库:好多好东西,可惜不用的时候基本不看

https://lbsyun.baidu.com/index.php?title=open/library
http://lbs.baidu.com/index.php?title=jspopular3.0/openlibrary
百度地图api 渲染大量标注 显示信息框 使用MarkerClusterer_第2张图片

4、参考资料(致谢)

https://blog.csdn.net/qq_25803965/article/details/94561759
https://www.cnblogs.com/Sun-godless/p/6678601.html

5、人生如山,为梦而攀

你可能感兴趣的:(前端,javascript,前端,jquery)