<!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>
5552
非常没帮助
没帮助
一般
有帮助
非常有帮助
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
