百度地图开发：多点标注 JSON 格式数据和自定义信息窗实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>百度地图开发示例：多点标注和自定义信息窗</title>
<style type="text/css">
#mapContainer {
width: 100%;
height: 500px;
}
</style>
</head>
<body>
<div id="mapContainer"></div>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的百度地图API密钥"></script>
<script type="text/javascript">
// 初始化地图
var map = new BMap.Map("mapContainer");
var point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point, 12);
<p>// 自定义信息窗样式
var infoBoxStyle = {
width: "200px",
height: "100px",
border: "1px solid #ccc",
borderRadius: "5px",
backgroundColor: "#fff",
padding: "10px",
fontSize: "14px",
lineHeight: "20px"
};</p>
<p>// 添加多个标注
var markers = [
{
point: new BMap.Point(116.404, 39.915),
title: "标注1",
content: "这是标注1的内容"
},
{
point: new BMap.Point(116.414, 39.925),
title: "标注2",
content: "这是标注2的内容"
},
{
point: new BMap.Point(116.424, 39.935),
title: "标注3",
content: "这是标注3的内容"
}
];</p>
<p>for (var i = 0; i < markers.length; i++) {
var marker = new BMap.Marker(markers[i].point);
map.addOverlay(marker);</p>
<p>// 创建信息窗实例
var infoBox = new BMapLib.InfoBox(map, markers[i].content, {
boxStyle: infoBoxStyle,
closeIconMargin: "10px 10px 0 0",
enableAutoPan: true,
align: INFOBOX_AT_TOP
});</p>
<p>// 点击标注时打开信息窗
marker.addEventListener("click", function () {
infoBox.open(this);
});</p>
<p>// 点击信息窗的关闭按钮时关闭信息窗
infoBox.addEventListener("close", function () {
infoBox.close();
});</p>
<p>// 添加信息窗标题和关闭按钮
var infoBoxContent = document.createElement("div");
infoBoxContent.innerHTML = "<h3>" + markers[i].title + "</h3>" +
"<a href='javascript:void(0);' onclick='closeInfoBox()'>关闭</a>";
infoBox.setContent(infoBoxContent);
}</p>
<p>// 关闭当前信息窗
function closeInfoBox() {
infoBox.close();
}
</script></p>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/pLa3 著作权归作者所有。请勿转载和采集!