maps v3无法获得多边形完成后的更改事件
提问于 2017-02-06 10:32:29
我有一个地图，我想画多边形，使用googlemaps v3。如果我自己绘制一个多边形，我就可以在getPath()上获得多边形的getPath事件，而不需要问题；但是如果我想让用户绘制多边形，那么我就无法从多边形抓取onChange事件。
我的想法是创建两个空多边形，并将其中一个用于drawingManager；一旦绘图管理器的多边形触发polygonComplete，我就将其路径复制到另一个多边形并去掉drawingManager，但这是行不通的。
html：
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=drawing" type="text/javascript"></script>css：
#map{
height: 500px;
width: 500px;
}联署材料：
if (document.getElementById('map')){
var mapOptions = {
zoom: 6,
center: {lat: 24.886, lng: -70.268},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var field = new google.maps.Polygon({
paths: [],
editable: true
});
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
var drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.POLYGON,
polygonOptions: {
editable: false
},
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: [google.maps.drawing.OverlayType.POLYGON]
}
});
drawingManager.setMap(map);
google.maps.event.addListener(drawingManager, 'polygoncomplete', function(polygon) {
drawingManager.setOptions({
drawingMode: null,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: []
}
});
field.setPath(polygon.getPath().getArray());
polygon.setMap(null);
polygon = null;
field.setMap(map);
});
google.maps.event.addListener(field.getPath(), 'set_at', function(index, obj) {
// changed point, via map
console.log(field.getPath());
console.log("a point has changed");
});
google.maps.event.addListener(field.getPath(), 'insert_at', function(index, obj) {
// new point via map
console.log(field.getPath());
console.log("a point has been added");
});
google.maps.event.addListener(field.getPath(), "remove_at", function(index, obj) {
//removed point, via map
console.log(field.getPath());
console.log("a point has been removed");
});
}我还设置了一个代码示例这里。
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-02-06 10:59:48
您需要移动在polygoncomplete事件处理程序函数中添加事件侦听器的代码。
相关问题：Javascript google地图绘制事件。
google.maps.event.addListener(drawingManager, 'polygoncomplete', function(polygon) {
drawingManager.setOptions({
drawingMode: null,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: []
}
});
field.setPath(polygon.getPath().getArray());
polygon.setMap(null);
polygon = null;
field.setMap(map);
google.maps.event.addListener(field.getPath(), 'set_at', function(index, obj) {
// changed point, via map
console.log(field.getPath());
console.log("a point has changed");
});
google.maps.event.addListener(field.getPath(), 'insert_at', function(index, obj) {
// new point via map
console.log(field.getPath());
console.log("a point has been added");
});
google.maps.event.addListener(field.getPath(), "remove_at", function(index, obj) {
//removed point, via map
console.log(field.getPath());
console.log("a point has been removed");
});
});代码片段：
var map;
function initialize() {
if (document.getElementById('map')) {
var mapOptions = {
zoom: 6,
center: {
lat: 24.886,
lng: -70.268
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var field = new google.maps.Polygon({
paths: [],
editable: true
});
map = new google.maps.Map(document.getElementById('map'), mapOptions);
var drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.POLYGON,
polygonOptions: {
editable: false
},
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: [google.maps.drawing.OverlayType.POLYGON]
}
});
drawingManager.setMap(map);
google.maps.event.addListener(drawingManager, 'polygoncomplete', function(polygon) {
drawingManager.setOptions({
drawingMode: null,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: []
}
});
field.setPath(polygon.getPath().getArray());
polygon.setMap(null);
polygon = null;
field.setMap(map);
google.maps.event.addListener(field.getPath(), 'set_at', function(index, obj) {
// changed point, via map
for (var i = 0; i < field.getPath().getLength(); i++) {
console.log(field.getPath().getAt(i).toUrlValue(6));
}
console.log("a point has changed");
});
google.maps.event.addListener(field.getPath(), 'insert_at', function(index, obj) {
// new point via map
for (var i = 0; i < field.getPath().getLength(); i++) {
console.log(field.getPath().getAt(i).toUrlValue(6));
}
console.log("a point has been added");
});
google.maps.event.addListener(field.getPath(), "remove_at", function(index, obj) {
//removed point, via map
for (var i = 0; i < field.getPath().getLength(); i++) {
console.log(field.getPath().getAt(i).toUrlValue(6));
}
console.log("a point has been removed");
});
});
}
}
google.maps.event.addDomListener(window, "load", initialize);#map {
height: 500px;
width: 500px;
}<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,drawing"></script>
<div id="map"></div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42074790
复制相关文章
腾讯云开发者
