Google地图：应用事件监听器 [英] Google Maps: Applying Event Listeners
本文介绍了Google地图：应用事件监听器的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我需要在使用Google地图绘制模式时跟踪绘制形状的坐标。我可以添加一个事件侦听器，一旦绘制了一个图形（例如多边形）来记录给定的ID和坐标在点击和 dragend insert_at ， remove_at ，<$ c $>），但它们在编辑形状时不起作用C> set_at ）。
var shapeID = 1;
google.maps.event.addListener（drawingManager，'polygoncomplete'，function（polygon）{
drawingManager.setDrawingMode（null）;
polygon.setOptions（ {id：shapeID，editable：true，draggable：true}）;
google.maps.event.addListener（多边形，'click'，function（）{
console.log（this .id +''+ this.getPath（）。getArray（）。toString（））;
}）;
google.maps.event.addListener（polygon，'dragend'，function （）{
console.log（this.id +''+ this.getPath（）。getArray（）。toString（））;
}）;
google.maps .event.addListener（polygon，'insert_at'，function（）{
console.log（this.id +''+ this.getPath（）。getArray（）。toString（））;
}） ;
google.maps.event.addListener（polygon，'remove_at'，function（）{
console.log（this.id +''+ this.getPath（）。getArray（） .toString（））;
}）;
google.maps.event.addListener（polygon，'set_at'，function（）{
console.log（this。 id +''+ this.getPath（）。getArray（）。toString（））;
}）;
shapeID ++;
}）;
设置多边形选项可以正常工作;如果你点击多边形，他们正确的形状ID将被记录在控制台中。
我的问题是我想添加一个像这样的事件：
google.maps.event.addListener（polygon.getPath（），insert_at，getPath）;
google.maps.event.addListener（polygon.getPath（），remove_at，getPath）;
google.maps.event.addListener（polygon.getPath（），set_at，getPath）;
函数getPath（）{
var path = polygon.getPath（）;
var len = path.getLength（）;
var coordStr ='id：'+ polygon.id +'\\\
';
for（var i = 0; i< len; i ++）{
coordStr + = path.getAt（i）.toUrlValue（6）+\\\
;
}
console.log（coordStr）;
}
但我无法通过指定的shapeID访问形状。 Google地图不允许我在字符串中分配多边形ID：
google.maps.event.addListener（POLYGON_ID.getPath （），insert_at，getPath）;
我收到一个错误，提示a没有定义。
如果在
overlaycomplete <内部>（本地）内包含 getPath 函数， / code>事件函数，它可以引用该多边形及其ID。 var shapeID = 1;
google.maps.event.addListener（drawingManager，'polygoncomplete'，function（polygon）{
drawingManager.setDrawingMode（null）;
polygon.setOptions（ {
id：shapeID，
editable：true，
draggable：true
}）;
google.maps.event.addListener（polygon，'点击'，function（）{
console.log（this.id +''+ this.getPath（）。getArray（）。toString（））;
}）;
google.maps.event.addListener（polygon，'dragend'，function（）{
console.log（this.id +''+ this.getPath（）。getArray（）。toString（））;
}）;
google.maps.event.addListener（polygon.getPath（），insert_at，getPath）;
google.maps.event.addListener（polygon。 getPath（），remove_at，getPath）;
google.maps.event.addListener（polygon.getPath（），set_at，getPath）;
getPath（）{
var path = polygon.getPath（）;
var len = path.getLength（）;
var coordStr ='id：'+ polygon.id + '\\\
';
for（var i = 0;我< LEN; i ++）{
coordStr + = this.getAt（i）.toUrlValue（6）+\\\
;
}
console.log（coordStr）;
}
shapeID ++;
}）;
代码段：
$ b $ var geocoder; var map;函数initMap（）{var map = new google.maps.Map（ document.getElementById（'map'），{center：{lat：-34.397，lng：150.644}，zoom：8}）; var drawingManager = new google.maps.drawing.DrawingManager（{drawingMode：google.maps.drawing.OverlayType.MARKER，drawingControl：true，drawingControlOptions：{position：google.maps.ControlPosition.TOP_CENTER，drawingModes：['marker'，'圆形'，'多边形'，'折线'，'矩形']}，markerOptions：{图标：'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'} ，circleOptions：{fillColor：'＃ffff00'，fillOpacity：1，strokeWeight：5，clickable：false，editable：true，zIndex：1}}）; drawingManager.setMap（地图）; var shapeID = 1; google.maps.event.addListener（drawingManager，'polygoncomplete'，function（polygon）{drawingManager.setDrawingMode（null）; polygon.setOptions（{id：shapeID，editable：true，draggable：true}）; google.maps.event .addListener（多边形，'click'，function（）{console.log（this.id +''+ this.getPath（）。getArray（）。toString（））;}）; google.maps.event.addListener polygon.getPath（）。getArray（）。toString（））;}）; google.maps.event.addListener（polygon.getPath（））; （），insert_at，getPath）; google.maps.event.addListener（polygon.getPath（），remove_at，getPath）; google.maps.event.addListener（polygon.getPath（），set_at，getPath ）; function getPath（）{var path = polygon.getPath（）; var len = path.getLength（）; var coordStr ='id：'+ polygon.id +'\\\
'; for（var i = 0; i< len; i ++）{coordStr + = this.getAt（i）.toUrlValue（6）+\\\
; } console.log（coordStr）;} shapeID ++; }）;} google.maps.event.addDomListener（window，load，initMap）;
/ *总是显式设置地图高度以定义包含地图的div *元素的大小。 * /＃map {height：100％;} / *可选：使样本页面填满窗口。 * / html，body {height：100％;保证金：0; padding：0;}
< script src =https ：//maps.googleapis.com/maps/api/js？libraries = geometry，drawing>< / script>< div id =map>< / div>
I need to keep track of coordinates of drawn shapes while using Google Maps drawing mode. I can add event listeners once a shape is drawn (e.g. polygon) to log the given ID and coordinates in both click and dragend events, but they won't work when editing the shape (e.g. insert_at, remove_at, set_at).
var shapeID = 1;
google.maps.event.addListener(drawingManager, 'polygoncomplete', function(polygon) {
drawingManager.setDrawingMode(null);
polygon.setOptions({ id: shapeID, editable:true, draggable:true });
google.maps.event.addListener(polygon, 'click', function() {
console.log(this.id+' '+this.getPath().getArray().toString());
});
google.maps.event.addListener(polygon, 'dragend', function() {
console.log(this.id+' '+this.getPath().getArray().toString());
});
google.maps.event.addListener(polygon, 'insert_at', function() {
console.log(this.id+' '+this.getPath().getArray().toString());
});
google.maps.event.addListener(polygon, 'remove_at', function() {
console.log(this.id+' '+this.getPath().getArray().toString());
});
google.maps.event.addListener(polygon, 'set_at', function() {
console.log(this.id+' '+this.getPath().getArray().toString());
});
shapeID++;
});
Setting the polygon options works fine; if you click on the polygons their correct shapeID is logged in the console.
My problem is that I want to add an event like this:
google.maps.event.addListener(polygon.getPath(), "insert_at", getPath);
google.maps.event.addListener(polygon.getPath(), "remove_at", getPath);
google.maps.event.addListener(polygon.getPath(), "set_at", getPath);
function getPath() {
var path = polygon.getPath();
var len = path.getLength();
var coordStr = 'id: '+polygon.id+'\n';
for (var i=0; i<len; i++) {
coordStr += path.getAt(i).toUrlValue(6)+"\n";
}
console.log(coordStr);
}
But I can't access the shapes by their assigned shapeID. Google Maps isn't letting me assign the polygon ID in the string:
google.maps.event.addListener(POLYGON_ID.getPath(), "insert_at", getPath);
I get an error that says "a is not defined".
解决方案 If you include the getPath function inside (local to) the overlaycomplete event function, it can reference the polygon and its ID.
var shapeID = 1;
google.maps.event.addListener(drawingManager, 'polygoncomplete', function(polygon) {
drawingManager.setDrawingMode(null);
polygon.setOptions({
id: shapeID,
editable: true,
draggable: true
});
google.maps.event.addListener(polygon, 'click', function() {
console.log(this.id + ' ' + this.getPath().getArray().toString());
});
google.maps.event.addListener(polygon, 'dragend', function() {
console.log(this.id + ' ' + this.getPath().getArray().toString());
});
google.maps.event.addListener(polygon.getPath(), "insert_at", getPath);
google.maps.event.addListener(polygon.getPath(), "remove_at", getPath);
google.maps.event.addListener(polygon.getPath(), "set_at", getPath);
function getPath() {
var path = polygon.getPath();
var len = path.getLength();
var coordStr = 'id: ' + polygon.id + '\n';
for (var i = 0; i < len; i++) {
coordStr += this.getAt(i).toUrlValue(6) + "\n";
}
console.log(coordStr);
}
shapeID++;
});
code snippet:
var geocoder;
var map;
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: -34.397,
lng: 150.644
},
zoom: 8
});
var drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.MARKER,
drawingControl: true,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: ['marker', 'circle', 'polygon', 'polyline', 'rectangle']
},
markerOptions: {
icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'
},
circleOptions: {
fillColor: '#ffff00',
fillOpacity: 1,
strokeWeight: 5,
clickable: false,
editable: true,
zIndex: 1
}
});
drawingManager.setMap(map);
var shapeID = 1;
google.maps.event.addListener(drawingManager, 'polygoncomplete', function(polygon) {
drawingManager.setDrawingMode(null);
polygon.setOptions({
id: shapeID,
editable: true,
draggable: true
});
google.maps.event.addListener(polygon, 'click', function() {
console.log(this.id + ' ' + this.getPath().getArray().toString());
});
google.maps.event.addListener(polygon, 'dragend', function() {
console.log(this.id + ' ' + this.getPath().getArray().toString());
});
google.maps.event.addListener(polygon.getPath(), "insert_at", getPath);
google.maps.event.addListener(polygon.getPath(), "remove_at", getPath);
google.maps.event.addListener(polygon.getPath(), "set_at", getPath);
function getPath() {
var path = polygon.getPath();
var len = path.getLength();
var coordStr = 'id: ' + polygon.id + '\n';
for (var i = 0; i < len; i++) {
coordStr += this.getAt(i).toUrlValue(6) + "\n";
}
console.log(coordStr);
}
shapeID++;
});
}
google.maps.event.addDomListener(window, "load", initMap);
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,drawing"></script>
<div id="map"></div>
这篇关于Google地图：应用事件监听器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
