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

注册使用百度地图账号,申请密钥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

百度地图海量数据打点整理相关推荐

百度地图mysql打点_关于百度地图连接MYSQL的问题，谢谢啦！
该楼层疑似违规已被系统折叠隐藏此楼查看此楼大家好,刚使用百度地图API,请教大家一个问题,谢啦! 我需要从我的数据库中取出字段为"city"的所有数据,然后通过bdGEO()函 ...
Vue通过微信定位+百度地图获取详细地理位置信息
项目中需要使用到定位功能,定位用户所在的省市,并自动填充到省市的选择列表中,微信开发中,定位功能直接使用微信提供的接口,方便并且简单,兼容性相对好处理因为微信定位或者百度地图的定位都是先通过定位获取 ...
百度地图MapV实现海量数据画线、点聚合等功能
前言 MapVGL,是一款基于WebGL的地理信息可视化库,可以用来展示大量基于3D的地理信息点线面数据.设计初衷主要是为了解决大数据量的三维地理数据展示问题及一些炫酷的三维效果. 官网地址:MapV ...
GPS转换百度地图坐标websocket(stomp)实现动态打点
序这会已经下班乐,本来觉得这个好像没有什么新东西.最后决定还是趁现在下班写写是因为要让大家看看单技术组合使用的意义.这里就是在上次springBoot+thymeleaf+layui后 ...
移动端百度地图多点标注php,百度地图API多重打点标注
因为之前的html地图页面,所以去找了很多Demo和代码来学习,其中有一个Demo,不知道出处但是最后用了他的方法来处理百度地图的多重打点并且显示标注信息的方法,具体代码我就不贴了,去搜索:百度地图A ...
百度地图no result available_【整理之路二】百度地图的路径规划和调用本机地图导航...
推荐看完之后注意一下最后的东西一.细说百度地图的路径规划路径规划主要有这么几种 1.公交路径规划 1.1 市内公交规划(暂时不在这里说) 1.2 跨市/省公交规划 // 导入头文件 #import ...
【整理之路二】百度地图的路径规划和调用本机地图导航
一.细说百度地图的路径规划路径规划主要有这么几种 1.公交路径规划 1.1 市内公交规划(暂时不在这里说) 1.2 跨市/省公交规划 // 导入头文件#import <BaiduMapAPI_ ...
根据php经纬度百度地图打点,PHP使用百度地图获取指定地址坐标：经纬度（图文+视频）...
本篇文章主要给大家介绍PHP使用百度地图获取指定地址坐标之经纬度的实现方法. 在之前的文章[PHP使用百度地图获取指定地址坐标:创建AK]中,已经给大家介绍了如何在百度地图开放平台中创建AK(api ...
百度地图 - 添加区划覆盖物 - 循环打点
var map = new BMap.Map("mapId",{enableMapClick:false}); // 创建Map实例 //禁用点击事件function baiDuM ...

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

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

接下来添加海量点功能

百度地图海量数据打点整理相关推荐

最新文章

热门文章