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

最新推荐文章于 2023-07-01 00:45:00 发布

高谷深陵

最新推荐文章于 2023-07-01 00:45:00 发布

阅读量1.4k

点赞数 1

分类专栏：前端文章标签： javascript 前端 jquery

本文链接：https://blog.csdn.net/aasszzxxddff/article/details/108203559

版权

前端专栏收录该内容

3 篇文章 1 订阅

订阅专栏

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 + "<br>设备类型:" + i + " <br>电量:" + i,marker);
        /*—————需要信息框———————*/
        markers.push(marker);
    }
    var markerClusterer = new BMapLib.MarkerClusterer(map, {markers:markers});
</script>
</html>

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

①、官网：

http://lbsyun.baidu.com/
你注册开发者账号就知道ak是什么了
因为使用的web，所以选红框这个，里边说明书的第一节就是教你注册
在这里插入图片描述

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

https://lbsyun.baidu.com/index.php?title=open/library
http://lbs.baidu.com/index.php?title=jspopular3.0/openlibrary
在这里插入图片描述

4、参考资料（致谢）

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

5、人生如山，为梦而攀

高谷深陵

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
百度地图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"/&
复制链接

扫一扫