<!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 {
width: 100%;
height: 100%;
margin: 0;
font-family: "微软雅黑";
}
#allmap {
width: 100%;
height: 500px;
}
p {
margin-left: 5px;
font-size: 14px;
}
</style>
<script src="assets/js/jquery.min.js"></script>
<script type="text/javascript" src="assets/js/utility.js"></script>
<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&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>
<p>缩放地图,查看点聚合效果</p>
</body>
</html>
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("allmap");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 5);
//启用滑动滚轮放大地图
map.enableScrollWheelZoom();
//创建一维数组
var markers = [];
var pt = null;
$(function () {
var json = JSON.stringify({
"参数名称":参数值
});
$.ajax({
url: 接口地址,
method: "post",
type: "json",
contentType: "application/json;charset=utf-8",
data: json,
success: function (e) {
for (var i = 0; i < e.length; i++) {
pt = new BMap.Point(e[i].Longitude, e[i].Latitude);
//标注每个坐标点
var maker = new BMap.Marker(pt);
markers.push(maker);
//窗口信息
var Content = '自定义窗口信息';
//添加点击事件
addClickHandler(Content, maker);
}
//最简单的用法,生成一个marker数组,然后调用markerClusterer类即可。
var markerClusterer = new BMapLib.MarkerClusterer(map, {markers: markers});
},
error: function (e) {
}
})
});
var opts = {
width: 100, // 信息窗口宽度
height: 100, // 信息窗口高度
//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); //开启信息窗口
}
</script>
百度地图点聚合,放大聚合后监听单个标注事件
最新推荐文章于 2021-06-15 22:34:45 发布