百度地图使用折线、多边形覆盖物绘制或编辑行政区域

最新推荐文章于 2025-09-16 12:43:30 发布

原创

最新推荐文章于 2025-09-16 12:43:30 发布 · 6.8k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#绘制折线多边形 #显示行政区域 #编辑行政区域

本文详细介绍百度地图API的各种资源，包括开放平台、JavaScript API版本、类参考、示例DEMO、AK申请、开源库及坐标拾取系统。涵盖地图开发所需的关键信息，如使用折线、多边形覆盖物绘制或编辑行政区域的方法。

百度地图开发常用网站

1、百度地图开放平台

http://lbsyun.baidu.com/

2、百度地图 Javascript API

3、JavaScript API v2.0类参考

http://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference.html

4、百度地图示例DEMO（JavaScript API v2.0）

http://lbsyun.baidu.com/jsdemo.htm#a1_2

5、百度地图 ak 申请：（JavaScript API v2.0）

http://lbsyun.baidu.com/index.php?title=jspopular/guide/getkey

6、开源库（JavaScript API v2.0）：鼠标绘制工具条、热力图、聚合marker、测距工具、自定义覆盖物、自定义信息窗口、路书等功能

http://lbsyun.baidu.com/index.php?title=jspopular/openlibrary

7、百度地图坐标拾取系统

http://api.map.baidu.com/lbsapi/getpoint/index.html

说明

项目中使用 JavaScript API v2.0 版本，当然也可以使用最新版 V3.0。

JavaScript API Lite是移动端浏览器上构建地图应用

百度地图使用折线、多边形覆盖物绘制或编辑行政区域

1、百度地图 ak 申请：（JavaScript API v2.0）

http://lbsyun.baidu.com/index.php?title=jspopular/guide/getkey

2、实现效果图如下：

首先说明一下，这里分别使用折线（左边）和多边形覆盖物（右边）绘制河源市和梅州市行政区域。下图中可以看出区别：

这里用的的测试数据行政区域坐标，是通过这篇文章的内容获取的：百度地图API获取行政区域边界（省、市、区县）

编辑功能，操作说明：

1、从折线或多边形覆盖物中，右键点击编辑区域功能，此时覆盖物变为编辑状态（出现很多小方块及连接线）

2、放大地图，任意拖动小方块即可编辑（调整）区域数据。

3、编辑好数据后，从折线或多边形覆盖物中，右键点击保存区域功能，即可得到新的区域坐标数据。

3、网页源码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>百度地图使用折线、多边形覆盖物绘制或编辑行政区域</title>
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你在百度地图开放平台申请的ak"></script>
		<!--  你在百度地图开放平台申请的ak -->
	</head>
	<body>
		<div id="allmap" style="position: absolute; width: 100%; top: 0px; bottom: 0px"></div>
		<script type="text/javascript">
		//添加鼠标触发事件
		function addMarkerClickHandler(content, e) {
            var isEditing = false;
            e.addEventListener("mousedown", function (e) {
                var markerMenua = new BMap.ContextMenu();
                var txtMenuItema = [
                        {
                            text: "编辑" + content,
                            callback: function () {
                                var p = e.target;
                                if (isEditing == true) {
                                    alert("您当前处于编辑状态，请拖动小方块改变辖区范围或保存辖区！");
                                    return;
                                } else {
                                    if (p instanceof BMap.Label) {
                                        layer.msg(p.content);
                                    } else if (p instanceof BMap.Circle) {
                                        var tips = "该覆盖物是圆，圆的半径是：" + p.getRadius() + "，圆的中心点坐标是：" + p.getCenter().lng + "," + p.getCenter().lat;
                                        alert(p.content);
                                    } else if (p instanceof BMap.Polygon) {
                                        getpoligon = p;
                                        alert("当前编辑的辖区包含的的坐标个数是：" + p.getPath().length);
                                        p.enableEditing();
                                        isEditing = true;
                                    } else {
                                        getpoligon = p;
                                        p.enableEditing();
                                        isEditing = true;
                                        alert("无法获知该覆盖物类型：" + p.getPath().length);
                                    }
                                }
                            }
                        },
                        {
                            text: "保存" + content,
                            callback: function () {
                                var strpara = "";
                                var posiall = [];
                                if (isEditing == false) {
                                    alert("您还未处于编辑状态，请点击编辑辖区！");
                                    return;
                                } else {
                                    if (confirm('您确定要保存辖区吗？') == true) {
                                        var strpara = "";
                                        var posiall = [];
                                        posiall = e.target.getPath();
                                        for (var i = 0; i < posiall.length; i++) {
                                            if (i > 0) {
                                                strpara += ";" + posiall[i].lng + "," + posiall[i].lat;
                                            } else {
                                                strpara += posiall[i].lng + "," + posiall[i].lat;
                                            }
                                        }
                                        console.log("------------------------------- 获取当前多边形坐标数据-------------------------------");
                                        console.log("获取当前多边形坐标数据成功，坐标个数为：" + posiall.length);
                                        console.log("坐标数据：" + strpara);
                                        alert("保存成功！测试信息。。。当前覆盖物坐标数： " + posiall.length);
                                        
                                    }
                                }
                            }
                        }];
                markerMenua.addItem(new BMap.MenuItem(txtMenuItema[0].text,
                        txtMenuItema[0].callback, 120));
                markerMenua.addItem(new BMap.MenuItem(txtMenuItema[1].text,
                        txtMenuItema[1].callback, 120));
                e.target.addContextMenu(markerMenua);
            });