Google Maps API v3：允许自定义 OverlayView 上的默认上下文菜单

Question

我有一张带有自定义叠加层的地图（基于https://developers-dot-devsite-v2-prod.appspot.com/maps/documentation/javascript/examples/overlay-popup）。自定义叠加内容包括链接/锚标记，我希望允许用户右键单击该链接并选择“在新选项卡中打开”，但是地图取消了右键单击，我无法弄清楚如何防止那种行为。如果您将上面链接的自定义叠加示例与默认信息窗口https://developers-dot-devsite-v2-prod.appspot.com/maps/documentation/javascript/examples/infowindow-simple 进行比较，您会注意到右键单击“Hello World”文本时，自定义叠加不会显示上下文菜单，而信息窗口会显示上下文菜单。在开发工具中，我注意到信息窗口上的一个事件处理程序以某种方式允许上下文菜单（删除该处理程序会停止出现上下文菜单），但是由于它在缩小的谷歌地图代码中，我无法理解它.我尝试了以下方法：google.maps.event.addListener(map, 'rightclick', function (e) {    var event = e.ya;    var element = event.target;    if (element.nodeName === "A") {        event.stopImmediatePropagation();        event.stopPropagation();        return true;    }});代码已执行，但仍然没有上下文菜单。相反，它会在地图上破坏地图上的某些内容，然后随着鼠标移动，就好像我仍然按下鼠标一样（看起来我阻止了 mouseup 处理程序）。我还尝试设置preventMapHitsFrom自定义叠加层（https://developers.google.com/maps/documentation/javascript/reference/overlay-view#OverlayView.preventMapHitsAndGesturesFrom），这使得上面不再触发，但仍然没有上下文菜单。我还能够自己附加一个事件处理程序（请原谅 jQuery）：$(document).on("contextmenu", ".map-popup__link", function (e) {    e.stopImmediatePropagation();    return true;});但再次不确定如何防止事件被取消。我还尝试在同一元素上触发一个新事件，但这只会创建一个循环（显然）而没有解决问题。基于https://stackoverflow.com/a/7414594/1397352 我已经将Popup.prototype.onAdd函数修改为Popup.prototype.onAdd = function () {    this.getPanes().floatPane.appendChild(this.containerDiv);    this.getPanes().overlayMouseTarget.appendChild(this.containerDiv);    // set this as locally scoped var so event does not get confused    var me = this;    // Add a listener - we'll accept clicks anywhere on this div, but you may want    // to validate the click i.e. verify it occurred in some portion of your overlay.    google.maps.event.addDomListener(this.containerDiv, 'contextmenu', function () {        google.maps.event.trigger(me, 'contextmenu');    });};事件处理程序中的断点被击中，但同样没有显示上下文菜单。有没有人让它与自定义叠加层一起使用？

Answer 1

我能够在（存档的）信息框库中找到解决方案：https : //github.com/googlemaps/v3-utility-library/blob/master/archive/infobox/src/infobox.js#L231

看起来我在第一次尝试时就很接近了，但应该设置 event.cancelBubble = true;

最终解决方案：

Popup.prototype.onAdd = function () {

    this.getPanes().floatPane.appendChild(this.containerDiv);

    // This handler allows right click events on anchor tags within the popup

    var allowAnchorRightClicksHandler = function (e) {

        if (e.target.nodeName === "A") {

            e.cancelBubble = true;

            if (e.stopPropagation) {

                e.stopPropagation();

            }

        }

    };

    this.contextListener_ = google.maps.event.addDomListener(this.containerDiv, "contextmenu", allowAnchorRightClicksHandler);

};

Popup.prototype.onRemove = function () {

    if (this.contextListener_) {

        google.maps.event.removeListener(this.contextListener_);

        this.contextListener_ = null;

    }

    if (this.containerDiv.parentElement) {

        this.containerDiv.parentElement.removeChild(this.containerDiv);

    }

};

有关弹出代码的其余部分，请参阅https://developers-dot-devsite-v2-prod.appspot.com/maps/documentation/javascript/examples/overlay-popup