使用Google地圖覆蓋而不是標記的事件偵聽器？

Question

下面我有一個代碼片段，它在谷歌地圖上生成一個標記和一個mapLabel（它擴展了覆蓋類）。

我試圖實現一個事件偵聽器，通過右鍵點擊刪除覆蓋，就像我用標記一樣，但它不工作！

我不知道如何使它工作，我曾嘗試使用「DomListener」和各種迭代，但它甚至似乎沒有打我在調試時的那行代碼。

我該如何使它可以右鍵單擊以刪除我的mapLabel對象？

var map; 
 

 

 
function initialize() { 
 
    map = new google.maps.Map(
 
    document.getElementById("map_canvas"), { 
 
     center: new google.maps.LatLng(37.4419, -122.1419), 
 
     zoom: 13 
 
    }); 
 
    addPlace(); 
 
    placeLabel(); 
 
} 
 

 
function addPlace() { 
 
    var marker = new google.maps.Marker({ 
 
    map: map, 
 
    position: new google.maps.LatLng(37.4419, -122.1419) 
 
    }); 
 
    google.maps.event.addListener(marker, 'rightclick', function() { 
 
    this.setMap(null); 
 
    }); 
 
} 
 

 
function placeLabel() { 
 
    var mapLabel = new MapLabel({ 
 
    text: 'Right click to delete??', 
 
    position: new google.maps.LatLng(37.4419, -122.1419), 
 
    map: map, 
 
    fontSize: 21, 
 
    align: 'center' 
 
    }); 
 
    google.maps.event.addListener(mapLabel, 'rightclick', function() { 
 
    this.setMap(null); 
 
    }); 
 
} 
 
google.maps.event.addDomListener(window, "load", initialize);

html, 
 
body, 
 
#map_canvas { 
 
    height: 250px; 
 
    width: 500px; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<script src="https://googlemaps.github.io/js-map-label/src/maplabel-compiled.js"></script> 
 
<div id="map_canvas" style="border: 2px solid #3872ac;"></div>

Answer 1

嘗試使用，而不是 '右擊' '鼠標按下'，然後區分哪些類型的點擊它。

google.maps.event.addListener(mapLabel, 'mousedown', function(e) { 
    if(e.which === 3) 
    { 
     this.setMap(null); 
    } 
    }); 

鼠標單擊代碼MSDN API： 0：無按鈕 1：左鍵 2：中間按鈕（如果存在） 3：右按鈕

Answer 2

MapLabel沒有事件偵聽器，但MarkerWithLabel確實。它在那裏完成的方式是他們有一個幾乎透明的div覆蓋標籤。任何監聽器都被添加到這個div中。

與MapLabel可以做類似的事情。看看MarkerWithLabel的源代碼：http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerwithlabel/src/markerwithlabel.js

下面是我自己的MapLabel替代方案中的一些代碼片段。這不完整，未經測試，但它應該讓你開始。

MapLabel.prototype.onAdd = function() { 
    var eventDiv = this.eventDiv_ = document.createElement('div'); 

    // ... 

    this.drawCanvas_(); 

    this.drawEventDiv_(); 

    var panes = this.getPanes(); 
    if (panes) { 
    panes.overlayMouseTarget.appendChild(eventDiv); 

    panes.overlayImage.appendChild(canvas); 
    } 

    // ... 

}; 

股利添加到overlayMouseTarget，最上層。

MapLabel.prototype.drawEventDiv_ = function() { 
    var eventDiv = this.eventDiv_; 
    if (!eventDiv) return; 

    var canvasWidth = this.canvas_.getContext('2d').measureText(this.get('text')).width; 
    var canvasHeight = this.get('fontSize'); 

    eventDiv.innerHTML = this.get('text'); 
    // This is needed for proper behavior on MSIE: 
    eventDiv.setAttribute("onselectstart", "return false;"); 
    eventDiv.setAttribute("ondragstart", "return false;"); 

    var eventDivStyle = this.eventDiv_.style; 
    eventDivStyle.width = canvasWidth + 'px'; 
    eventDivStyle.height = canvasHeight + 'px'; 
    eventDivStyle.cssText = this.get('text'); 
    eventDivStyle.font = this.get('fontSize') + 'px ' + this.get('fontFamily'); 
    eventDivStyle.position = 'absolute'; 
    eventDivStyle.opacity = 0.01; // Don't use 0; DIV won't be clickable on MSIE 
    eventDivStyle.MsFilter = "\"progid:DXImageTransform.Microsoft.Alpha(opacity=1)\""; 
    eventDivStyle.filter = "alpha(opacity=1)"; // For MSIE 
    eventDivStyle.marginLeft = this.getMarginLeft_(canvasWidth) + 'px'; 
    eventDivStyle.zIndex = /** @type number */(this.get('zIndex')); 
}; 

要添加事件偵聽器做到這一點：

google.maps.event.addDomListener(this.eventDiv_, 'click', function (e) { 
    //.. 

    this_.cAbortEvent(e); // Prevent click from being passed on to map 
}); 

cAbortEvent防止起泡。

MapLabel.prototype.cAbortEvent = function(e) { 
    if (e.preventDefault) { 
     e.preventDefault(); 
    } 
    e.cancelBubble = true; 
    if (e.stopPropagation) { 
     e.stopPropagation(); 
    } 
};