获取多边形的所有点的数组-谷歌地图绘图工具API-3
Get Array of all points of Polygon - Google Maps Drawing Tool API-3
我使用谷歌绘图工具在谷歌地图上绘制多边形/矩形,现在我需要显示标记落在绘制的多边形内,为此我使用geometry.poly.containsLocation方法,该方法需要一个点(latLng)和一个多边形点数组。如果我用地图。我可以通过poly.getPath()获得多边形点,但因为我使用谷歌绘图工具,它使用maps.drawing.DrawingManager/Google .maps. Drawing . overlaytype。多边形,所以不确定如何在这里找到点。由于
var drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.POLYGON,
drawingControl: true,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: [
google.maps.drawing.OverlayType.MARKER,
google.maps.drawing.OverlayType.CIRCLE,
google.maps.drawing.OverlayType.POLYGON,
google.maps.drawing.OverlayType.POLYLINE,
google.maps.drawing.OverlayType.RECTANGLE
]
},
markerOptions: {
icon: 'images/car-icon.png'
},
circleOptions: {
fillColor: '#ffff00',
fillOpacity: 1,
strokeWeight: 5,
clickable: false,
editable: true,
zIndex: 1
},
polygonOptions: {
fillColor: '#BCDCF9',
fillOpacity: 0.5,
strokeWeight: 2,
strokeColor:'#57ACF9',
clickable: false,
editable: false,
zIndex: 1
}
});
console.log(drawingManager)
drawingManager.setMap(map)
google.maps.event.addListener(drawingManager, 'polygoncomplete', function (polygon) {
// assuming you want the points in a div with id="info"
document.getElementById('info').innerHTML += "polygon points:" + "<br>";
for (var i = 0; i < polygon.getPath().getLength(); i++) {
document.getElementById('info').innerHTML += polygon.getPath().getAt(i).toUrlValue(6) + "<br>";
}
});
概念验证
代码片段:
var geocoder;
var map;
var polygonArray = [];
function initialize() {
map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.POLYGON,
drawingControl: true,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: [
google.maps.drawing.OverlayType.MARKER,
google.maps.drawing.OverlayType.CIRCLE,
google.maps.drawing.OverlayType.POLYGON,
google.maps.drawing.OverlayType.POLYLINE,
google.maps.drawing.OverlayType.RECTANGLE
]
},
/* not useful on jsfiddle
markerOptions: {
icon: 'images/car-icon.png'
}, */
circleOptions: {
fillColor: '#ffff00',
fillOpacity: 1,
strokeWeight: 5,
clickable: false,
editable: true,
zIndex: 1
},
polygonOptions: {
fillColor: '#BCDCF9',
fillOpacity: 0.5,
strokeWeight: 2,
strokeColor: '#57ACF9',
clickable: false,
editable: false,
zIndex: 1
}
});
console.log(drawingManager)
drawingManager.setMap(map)
google.maps.event.addListener(drawingManager, 'polygoncomplete', function(polygon) {
document.getElementById('info').innerHTML += "polygon points:" + "<br>";
for (var i = 0; i < polygon.getPath().getLength(); i++) {
document.getElementById('info').innerHTML += polygon.getPath().getAt(i).toUrlValue(6) + "<br>";
}
polygonArray.push(polygon);
});
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
height: 500px;
width: 500px;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,drawing&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas" style=" border: 2px solid #3872ac;"></div>
<div id="info"></div>
与geocodezip建议的解决方案略有不同,但使用相同的API调用:
google.maps.event.addListener(drawingManager, 'polygoncomplete', function (polygon) {
var path = polygon.getPath()
var coordinates = [];
for (var i = 0 ; i < path.length ; i++) {
coordinates.push({
lat: path.getAt(i).lat(),
lng: path.getAt(i).lng()
});
}
console.log(coordinates);
});
看起来,当用户完成绘图时,DrawingManager
将触发事件,事件处理程序将接收正常的google.maps.Polygon
, google.maps.Rectangle
,等等。我会试试的。
相关文章:
- 如果谷歌地图绘图(如onDraw)触发什么事件
- 谷歌地图API v3绘图管理器-地图不渲染
- 带有谷歌地图绘图的自定义按钮
- 在绘图中更改“绘图模式”谷歌地图v3的管理器
- 是否可以在单个html文件中添加两个谷歌地图API(绘图和几何)
- 将谷歌地图绘图库限制为一个折线/形状
- 谷歌地图上的自由形式绘图
- 由谷歌地图绘制的矩形 绘图管理器不会触发鼠标移动事件
- 谷歌地图V3绘图(谷歌示例不加载地图)
- 谷歌地图JavaScript API V3,Lat/Lon点的绘图数组
- 从谷歌地图api导出到JSON/XML绘图数据
- 谷歌地图API v3绘图,雷达回路覆盖,自动更新雷达
- 如何在不禁用编辑的情况下禁用谷歌地图绘图工具
- 检测覆盖是否包含标记对象.谷歌地图API V3,绘图库
- 任何方式做overlayBegin事件的谷歌地图API3绘图库
- 谷歌地图绘图API:属性
- 隐藏使用谷歌地图绘图库绘制的多边形
- 谷歌地图绘图管理器在引脚掉落后启动绘图
- 获取多边形的所有点的数组-谷歌地图绘图工具API-3
- 谷歌地图绘图管理器限制为1个多边形