利用百度API（JavaScript 版）实现在地图上绘制任一多边形，并判断给定经纬度是否在多边形范围内。以及两点间的测距功能

最新推荐文章于 2021-01-04 09:40:28 发布

源哥说

最新推荐文章于 2021-01-04 09:40:28 发布

阅读量4.2k

点赞数 1

分类专栏： web前端

本文链接：https://blog.csdn.net/yzyssg1/article/details/73130687

版权

这篇博客介绍了如何利用JavaScript和百度地图API来绘制地图上的多边形和折线，并实现判断点是否在多边形内以及两点间距离的测量。通过创建Polyline和Polygon对象，结合GeoUtils.js库提供的函数，可以完成地图上的图形绘制和地理计算功能。

摘要由CSDN通过智能技术生成

权声明：本文为博主原创文章，未经博主允许不得转载。

利用百度API（JavaScript 版）实现在地图上绘制任一多边形，并判断给定经纬度是否在多边形范围内。以及两点间的测距功能。

[javascript] view plain copy

绘制多边形（蓝色），折线轨迹（红色）效果图：

[javascript] view plain copy

<img src="https://img-blog.csdn.net/20150915193750707?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />

判断点范围，测距：

html代码：

[html] view plain copy

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
#allmap {height:500px; width: 100%;}
#control{width:100%;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=iqgvSM0gddG4NkGXFlawVa6C"></script>
<script type="text/javascript" src="GeoUtils.js"></script>
<title>设置线、面可编辑</title>
</head>
<body>
<div id="allmap"></div>
<div id="control">
<button onclick = "polyline.enableEditing();polygon.enableEditing();">开启线、面编辑功能</button>
<button onclick = "polyline.disableEditing();polygon.disableEditing();">关闭线、面编辑功能</button>
</div>
</body>
</html>
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("allmap");
map.centerAndZoom(new BMap.Point(106.613922,29.53832), 15);
map.enableScrollWheelZoom();
var polyline = new BMap.Polyline([
new BMap.Point(106.612539,29.529602),
new BMap.Point(106.607975,29.53177),
new BMap.Point(106.610311,29.525862),
new BMap.Point(106.60776,29.524008)
], {strokeColor:"red", strokeWeight:2, strokeOpacity:0.5}); //创建折线
map.addOverlay(polyline); //增加折线
var polygon = new BMap.Polygon([
new BMap.Point(106.607477,29.544864),
new BMap.Point(106.613572,29.548324),
new BMap.Point(106.619357,29.537421),
new BMap.Point(106.612988,29.537079),
new BMap.Point(106.615359,29.541143)
], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5}); //创建多边形
map.addOverlay(polygon); //增加多边形
var ppoint = new BMap.Point(106.613087,29.540485);
var result=BMapLib.GeoUtils.isPointInPolygon(ppoint, polygon);
alert("数字图书馆是否在多边形范围内："+result);
var ppoint1 = new BMap.Point(106.614986,29.539876);