Google Maps API v3 - 为什么没有事件上下文？答案

【问题标题】：Google Maps API v3 - why no context with events?Google Maps API v3 - 为什么没有事件上下文？
【发布时间】：2011-03-17 01:01:07
【问题描述】：

第一次使用 Google Maps API v3，我得到了一张带有一堆标记的地图。我想这样做，所以当您单击一个时，将显示一个特定的信息窗口（特定于您单击的标记）。我真的很惊讶点击事件没有告诉你被点击的实际标记！

我知道有一个解决方案使用单独的方法来创建闭包，但这对我来说似乎是一个 hack。有更好的方法吗？或者，有没有办法询问地图“该位置存在哪些标记”并从事件参数中传递位置？

我希望事件像这样工作：

google.maps.event.addListener(marker, 'click', function(event, obj)
{
    //Now I can work with "obj" - the thing that was clicked.
});

【问题讨论】：

标签： javascript events google-maps-api-3

【解决方案1】：

您应该只在事件侦听器中引用“this”。

google.maps.event.addListener(marker, 'click', function(e) {
  // this == marker;
  // e == MouseEvent
});

【讨论】：

这就是我一直在寻找的东西，我考虑过但没有费心去尝试！谢谢。

【解决方案2】：

let mousemoveDraw = this.mousemoveDraw.bind(this);
    let mousedown_event_DrawPolygonByFinger = this.mousedown_event_DrawPolygonByFinger.bind(this);
    let mouseup_event_DrawPolygonByFinger = this.mouseup_event_DrawPolygonByFinger.bind(this);

    this.mapInst.addEvents([
        { type: 'mousedown', event : mousedown_event_DrawPolygonByFinger },
        { type: 'mousemove', event: mousemoveDraw },
        { type: 'mouseup', event : mouseup_event_DrawPolygonByFinger }
    ]);

mapInst - 是 google 和 yandex 地图的包装器。在callbacak中可以使用这种方式

 //event drawing event
mousemoveDraw(event : any){
    console.log('mousemoveDraw')
    console.log(this)
    console.log(this.stateDrawing)
    try{
        if (this.stateDrawing != 1){
            console.log(this.stateDrawing)
            let lat = event.latLng.lat();
            let lng = event.latLng.lng();
            console.log(lat,lng)
            this.polyLine.pushCoord({ lat, lng });
        }
    }catch(e){
        console.log('error Polyline.mousemoveDraw : ',e.message);
    }
}

【讨论】：

你能翻译那条评论吗？

【解决方案3】：

当它由 API 提供时，它是如何被破解的？你所描述的是一个黑客。当您单击标记时，它将传递一个包含 lat & lng 的事件。

google.maps.event.addListener(marker, 'click', function(e) {
  console.log(e); // { x: 0, y: 0 }
});

【讨论】：

不，我所描述的根本不是 hack - 请参阅我更新的问题，也许我不清楚。感谢您的意见。

【解决方案4】：

我认为尝试根据点击事件的位置来寻找标记对象是错误的。使用闭包将事件与特定标记相关联对我来说似乎是一个有效的解决方案。我会创建一个看起来像这样的函数：

function createMarker (point, map)
{
    var marker = new google.maps.Marker({
            position: point,
            map: map,
            title: "blah"});

    marker.stuffOnTheMarker = "Some interesting stuff";

    var content = buildSomeContentForThisMarker ();

    google.maps.event.addListener(marker, 'click', function() {
            infowindow.close ();
            infowindow.setContent(content); 
            infowindow.open(map,marker);

            // access the marker than caused this event
            alert (marker.stuffOnTheMarker);
        });
}

【讨论】：

好吧，我猜这似乎是唯一的方法，但它真的感觉很脏。我想知道为什么他们没有实现他们的事件，所以你可以这样做： google.maps.event.addListener(marker, 'click', function(event, obj) {...}) 其中“obj”是导致事件。
我猜是因为闭包给了你这个。您可以从点击事件回调中访问标记。（更新答案）