百度地图海量数据打点整理

最新推荐文章于 2024-04-21 16:39:07 发布

守夜人_安东尼

最新推荐文章于 2024-04-21 16:39:07 发布

阅读量2.6k

点赞数 5

分类专栏： JavaScript 文章标签：百度地图海量点加载加载大量数据地图卡顿解决

本文链接：https://blog.csdn.net/qq_25803965/article/details/94561759

版权

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

百度地图海量数据打点整理

注册使用百度地图账号,申请密钥AK

百度AK申请

申请成功后可写本地测试Demo进行验证，如下代码
(复制代码更换你申请的ak即可运行)
注意：申请的ak尽量不要泄露出来，每个人的部分功能是有限额的

<!DOCTYPE html>
<html>

<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 type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=“你申请的ak”"></script>
  <title>地图展示</title>
</head>

<body>
  <div id="allmap"></div>
</body>

</html>
<script type="text/javascript">
  // 百度地图API功能
  var map = new BMap.Map("allmap"); // 创建Map实例
  map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别
  //添加地图类型控件
  map.addControl(new BMap.MapTypeControl({
    mapTypes: [
      BMAP_NORMAL_MAP,
      BMAP_HYBRID_MAP
    ]
  }));
  map.setCurrentCity("北京"); // 设置地图显示的城市 此项是必须设置的
  map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
</script>

运行的效果图

接下来添加海量点功能

添加海量点起始就是在地图上循环创建一个个的小Marker，准备好啦直接上代码

<!DOCTYPE html>
<html>

<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 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 src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
 <script type="text/javascript" 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);
 // 处理需要打点的经纬度数据 
 function getFirepointData() {
   function addMarker(point) {
     var marker = new BMap.Marker(point);
     map.addOverlay(marker);
   }
   // 工具条
   var navigationControl = new BMap.NavigationControl({
     // 靠左上角位置
     anchor: BMAP_ANCHOR_TOP_LEFT,
     // LARGE类型
     type: BMAP_NAVIGATION_CONTROL_LARGE,
     // 启用显示定位
     enableGeolocation: true
   });
   map.addControl(navigationControl);
   map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
   map.setZoom(1); //设置地图的缩放层级
   var markers = [];
   for (var i = 0; i < Arr.length; i++) {
     var point = new BMap.Point(Arr[i][0], Arr[i][1]);
     markers.push(new BMap.Marker(point));
   }
   var markerClusterer = new BMapLib.MarkerClusterer(map, {
     markers: markers
   });
 }
 getFirepointData()
</script>
</html>

细心的同学发现啦，代码中引入了一个MarkerClusterer_min.js的文件，该文件是为了防止在地图加载大量数据时造成卡顿的现象。
由于无法上传文件，以把文件存储在我的github上，大家可以下载导入。
https://github.com/972688893/MarkerClusterer

守夜人_安东尼

关注

5
点赞
踩
12

收藏

觉得还不错? 一键收藏
3
评论
百度地图海量数据打点整理

百度地图海量数据打点整理注册使用百度地图账号,申请密钥AK百度AK申请申请成功后可写本地测试Demo进行验证，如下代码(复制代码更换你申请的ak即可运行)注意：申请的ak尽量不要泄露出来，每个人的部分功能是有限额的<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" c...
复制链接

扫一扫