亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

Google Maps API v3:允許自定義 OverlayView 上的默認上下文菜單

Google Maps API v3:允許自定義 OverlayView 上的默認上下文菜單

智慧大石 2021-12-23 10:53:04
我有一張帶有自定義疊加層的地圖(基于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;});但再次不確定如何防止事件被取消。我還嘗試在同一元素上觸發一個新事件,但這只會創建一個循環(顯然)而沒有解決問題?;趆ttps://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');    });};事件處理程序中的斷點被擊中,但同樣沒有顯示上下文菜單。有沒有人讓它與自定義疊加層一起使用?
查看完整描述

1 回答

?
慕慕森

TA貢獻1856條經驗 獲得超17個贊

我能夠在(存檔的)信息框庫中找到解決方案: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


查看完整回答
反對 回復 2021-12-23
  • 1 回答
  • 0 關注
  • 272 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號