百度地图海量数据打点整理
注册使用百度地图账号,申请密钥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