百度地图多点标注：优化坐标格式，提升代码效率
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>百度地图多点标注示例 - 优化坐标格式</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=G9NGPycxMLGeUDIKd4AeQjDO7SMaCiGi"></script>
<script type="text/javascript" src="static/admin_img/map/js/infoBox.js"></script>
<style type="text/css">
#map {
position: absolute;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map = new BMap.Map("map");
map.setMapStyle({
style: 'midnight'
});
var point = new BMap.Point(108.34138, 22.819153); // 设置中心点坐标
map.centerAndZoom(point, 16); // 设置地图级别
<pre><code> // 添加多个点标注
var markers = [
{ point: new BMap.Point(116.404, 39.915), content: "这是第一个点" },
{ point: new BMap.Point(116.414, 39.925), content: "这是第二个点" },
{ point: new BMap.Point(116.424, 39.935), content: "这是第三个点" }
];
for (var i = 0; i < markers.length; i++) {
var marker = new BMap.Marker(markers[i].point);
map.addOverlay(marker);
// 添加infoBox信息窗
var infoBox = new BMapLib.InfoBox(map, markers[i].content, {
boxStyle: {
width: "200px",
height: "100px",
border: "1px solid #ccc",
borderRadius: "5px",
backgroundColor: "#000",
padding: "10px",
fontSize: "14px",
lineHeight: "20px",
color: "#fff",
},
closeIconMargin: "10px 2px 0 0",
enableAutoPan: true,
align: INFOBOX_AT_TOP
});
marker.addEventListener("click", function () {
infoBox.open(this);
});
}
// 启用滚轮缩放
map.enableScrollWheelZoom(true);
</script>
</code></pre>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/pNdK 著作权归作者所有。请勿转载和采集!