生成一个用百度地图js api编写的demo,demo展示百度地图绘制多边形的能力
时间: 2023-05-27 19:05:12 浏览: 94
百度地图JS api Demo
3星 · 编辑精心推荐
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>百度地图绘制多边形示例</title>
<style type="text/css">
html,body,#map{height:100%;margin:0;font-family:"微软雅黑";}
#toolbar{position:absolute;top:10px;left:10px;z-index:9999;}
#polygonList{position:absolute;top:50px;left:10px;z-index:9999;}
#polygonList ul{list-style:none;margin:0;padding:0;}
#polygonList li{margin-bottom:10px;}
</style>
</head>
<body>
<div id="map"></div>
<div id="toolbar">
<button onclick="startDrawPolygon()">开始绘制多边形</button>
<button onclick="endDrawPolygon()">结束绘制多边形</button>
<button onclick="clearMap()">清除地图上的多边形</button>
</div>
<div id="polygonList">
<ul></ul>
</div>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("map");
var points = []; // 多边形的点数组
var polygons = []; // 地图上的多边形数组
var polygonNames = []; // 多边形名称数组
var polygonIndex = 0; // 多边形的编号
var polygonList = document.getElementById("polygonList").getElementsByTagName("ul")[0]; // 多边形列表
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别
// 启用滚轮缩放
map.enableScrollWheelZoom(true);
// 添加地图点击事件
map.addEventListener("click", function (e) {
if (points.length == 0) {
alert("请先开始绘制多边形!");
return;
}
points.push(e.point); // 将点击的点加入点数组
var polyline = new BMap.Polyline(points, {strokeColor: "blue", strokeWeight: 2, strokeOpacity: 0.5}); // 创建折线
map.addOverlay(polyline); // 将折线添加到地图上
});
// 开始绘制多边形
function startDrawPolygon() {
if (points.length != 0) {
alert("请先结束绘制多边形!");
return;
}
var polygonName = "多边形" + (++polygonIndex); // 生成多边形名称
polygonNames.push(polygonName); // 将多边形名称加入名称数组
var polygonListItem = document.createElement("li"); // 创建多边形列表项
polygonListItem.innerHTML = polygonName; // 设置多边形列表项的文本内容
polygonListItem.onclick = function () {
var index = polygonNames.indexOf(this.innerHTML); // 获取多边形的编号
map.setViewport(polygons[index].getPath()); // 设置地图视野显示该多边形
};
polygonList.appendChild(polygonListItem); // 将多边形列表项添加到多边形列表上
}
// 结束绘制多边形
function endDrawPolygon() {
if (points.length == 0) {
alert("请先开始绘制多边形!");
return;
}
var polygon = new BMap.Polygon(points, {strokeColor: "blue", strokeWeight: 2, strokeOpacity: 0.5, fillColor: "blue", fillOpacity: 0.1}); // 创建多边形
map.addOverlay(polygon); // 将多边形添加到地图上
polygons.push(polygon); // 将多边形添加到多边形数组中
points = []; // 清空点数组
}
// 清除地图上的多边形
function clearMap() {
map.clearOverlays(); // 清除地图上所有的覆盖物
points = []; // 清空点数组
polygons = []; // 清空多边形数组
polygonNames = []; // 清空多边形名称数组
polygonIndex = 0; // 重置多边形的编号
polygonList.innerHTML = ""; // 清空多边形列表
}
</script>
</body>
</html>
阅读全文