Google 映射 event.addListener 对象未定义
Google maps event.addListener object undefined
我在 google 地图多边形中使用双击事件注册了一个 eventListener,但是如果我将调试器放入将在 dblclick 上执行的 de 函数中,我无法捕捉到单击了哪个多边形,对象 'newPolygon' 未定义。
问题是我有一个多边形数组,我需要知道点击了什么
var newPolygon = drawPolygon(map, p.cordenadas, true, false, false, "#FF0000", 0.35, "#FF0000", 0.8, 2);
var listener = google.maps.event.addListener(newPolygon, 'dblclick', function (e) {
//newPolygon = undefined
debugger;
});
绘制多边形函数:
function drawPolygon(map, paths, clickable, draggable, editable, fillColor, fillOpacity, strokeColor, strokeOpacity, strokeWeight)
{
polygon = new google.maps.Polygon({
paths: paths,
strokeColor: strokeColor,
strokeOpacity: strokeOpacity,
strokeWeight: strokeWeight,
fillColor: fillColor,
fillOpacity: fillOpacity,
editable: editable,
clickable: clickable,
draggable: draggable,
map: map,
});
var firstCoord = paths[0];
map.setCenter(firstCoord);
return polygon;
}
点击侦听器函数中对多边形的引用是this
。
var listener = google.maps.event.addListener(newPolygon, 'dblclick', function (e) {
for (var i=0; i<this.getPaths().getAt(0).getLength();i++) {
console.log(this.getPaths().getAt(0).getAt(i).toUrlValue());
}
debugger;
});
代码片段:
var geocoder;
var map;
function initialize() {
var 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 triangleCoords = [{
lat: 25.774,
lng: -80.190
}, {
lat: 18.466,
lng: -66.118
}, {
lat: 32.321,
lng: -64.757
}, {
lat: 25.774,
lng: -80.190
}];
var newPolygon = drawPolygon(map, triangleCoords, true, false, false, "#FF0000", 0.35, "#FF0000", 0.8, 2);
var listener = google.maps.event.addListener(newPolygon, 'dblclick', function(e) {
for (var i = 0; i < this.getPaths().getAt(0).getLength(); i++) {
console.log(this.getPaths().getAt(0).getAt(i).toUrlValue());
}
debugger;
});
}
google.maps.event.addDomListener(window, "load", initialize);
function drawPolygon(map, paths, clickable, draggable, editable, fillColor, fillOpacity, strokeColor, strokeOpacity, strokeWeight) {
polygon = new google.maps.Polygon({
paths: paths,
strokeColor: strokeColor,
strokeOpacity: strokeOpacity,
strokeWeight: strokeWeight,
fillColor: fillColor,
fillOpacity: fillOpacity,
editable: editable,
clickable: clickable,
draggable: draggable,
map: map,
});
var firstCoord = paths[0];
map.setCenter(firstCoord);
return polygon;
}
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>
我在 google 地图多边形中使用双击事件注册了一个 eventListener,但是如果我将调试器放入将在 dblclick 上执行的 de 函数中,我无法捕捉到单击了哪个多边形,对象 'newPolygon' 未定义。
问题是我有一个多边形数组,我需要知道点击了什么
var newPolygon = drawPolygon(map, p.cordenadas, true, false, false, "#FF0000", 0.35, "#FF0000", 0.8, 2);
var listener = google.maps.event.addListener(newPolygon, 'dblclick', function (e) {
//newPolygon = undefined
debugger;
});
绘制多边形函数:
function drawPolygon(map, paths, clickable, draggable, editable, fillColor, fillOpacity, strokeColor, strokeOpacity, strokeWeight)
{
polygon = new google.maps.Polygon({
paths: paths,
strokeColor: strokeColor,
strokeOpacity: strokeOpacity,
strokeWeight: strokeWeight,
fillColor: fillColor,
fillOpacity: fillOpacity,
editable: editable,
clickable: clickable,
draggable: draggable,
map: map,
});
var firstCoord = paths[0];
map.setCenter(firstCoord);
return polygon;
}
点击侦听器函数中对多边形的引用是this
。
var listener = google.maps.event.addListener(newPolygon, 'dblclick', function (e) {
for (var i=0; i<this.getPaths().getAt(0).getLength();i++) {
console.log(this.getPaths().getAt(0).getAt(i).toUrlValue());
}
debugger;
});
代码片段:
var geocoder;
var map;
function initialize() {
var 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 triangleCoords = [{
lat: 25.774,
lng: -80.190
}, {
lat: 18.466,
lng: -66.118
}, {
lat: 32.321,
lng: -64.757
}, {
lat: 25.774,
lng: -80.190
}];
var newPolygon = drawPolygon(map, triangleCoords, true, false, false, "#FF0000", 0.35, "#FF0000", 0.8, 2);
var listener = google.maps.event.addListener(newPolygon, 'dblclick', function(e) {
for (var i = 0; i < this.getPaths().getAt(0).getLength(); i++) {
console.log(this.getPaths().getAt(0).getAt(i).toUrlValue());
}
debugger;
});
}
google.maps.event.addDomListener(window, "load", initialize);
function drawPolygon(map, paths, clickable, draggable, editable, fillColor, fillOpacity, strokeColor, strokeOpacity, strokeWeight) {
polygon = new google.maps.Polygon({
paths: paths,
strokeColor: strokeColor,
strokeOpacity: strokeOpacity,
strokeWeight: strokeWeight,
fillColor: fillColor,
fillOpacity: fillOpacity,
editable: editable,
clickable: clickable,
draggable: draggable,
map: map,
});
var firstCoord = paths[0];
map.setCenter(firstCoord);
return polygon;
}
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>