Google地圖和透明點擊標記

Question

我正在使用Google maps API v3。在地圖的中間有一個（自定義的）標誌標誌，在旗體周圍有很大的透明區域。在標誌圖標下，還有另外一些標記由於死透明區域而無法訪問。有沒有什麼方法可以設置標記標記爲點擊？我找不到解決方案。

Answer 1

是的，有可能Marker類的shape屬性需要MarkerShape object。這描述了Marker的可點擊區域。

這是Google's Example。他們有一個自定義的標誌圖像，並調整形狀，使只有矩形標誌部分是可點擊的。使用MarkerShape對象，您可以繪製圓形，折線或多邊形形狀區域。

谷歌示例代碼段：

function setMarkers(map, locations) { 
    // Add markers to the map 

    // Marker sizes are expressed as a Size of X,Y 
    // where the origin of the image (0,0) is located 
    // in the top left of the image. 

    // Origins, anchor positions and coordinates of the marker 
    // increase in the X direction to the right and in 
    // the Y direction down. 
    var image = new google.maps.MarkerImage('images/beachflag.png', 
     // This marker is 20 pixels wide by 32 pixels tall. 
     new google.maps.Size(20, 32), 
     // The origin for this image is 0,0. 
     new google.maps.Point(0,0), 
     // The anchor for this image is the base of the flagpole at 0,32. 
     new google.maps.Point(0, 32)); 
    var shadow = new google.maps.MarkerImage('images/beachflag_shadow.png', 
     // The shadow image is larger in the horizontal dimension 
     // while the position and offset are the same as for the main image. 
     new google.maps.Size(37, 32), 
     new google.maps.Point(0,0), 
     new google.maps.Point(0, 32)); 
     // Shapes define the clickable region of the icon. 
     // The type defines an HTML <area> element 'poly' which 
     // traces out a polygon as a series of X,Y points. The final 
     // coordinate closes the poly by connecting to the first 
     // coordinate. 
    var shape = { 
     coord: [1, 1, 1, 20, 18, 20, 18 , 1], 
     type: 'poly' 
    }; 
    for (var i = 0; i < locations.length; i++) { 
    var beach = locations[i]; 
    var myLatLng = new google.maps.LatLng(beach[1], beach[2]); 
    var marker = new google.maps.Marker({ 
     position: myLatLng, 
     map: map, 
     shadow: shadow, 
     icon: image, 
     shape: shape, 
     title: beach[0], 
     zIndex: beach[3] 
    }); 
    } 
}