如何解決谷歌地圖上多個標記上的信息框標簽重疊

Question

我在 Google 地圖上有多個帶有自定義圖標的標記。 標記代表該地區的許多項目。 我添加了一個信息框，作為該區域中有多少項目的標簽。

拖動地圖時，信息框使用浮動窗格隨標記移動。

問題是我在這個問題上發現了一條評論，其中提到標記和信息框位於不同的窗格中，因此信息框顯示在所有標記上。 我希望它與其相關標記處於同一級別。

var labelText = '<div style="color: #000000"><b>'+ someTitle +'</b></div>';

var myOptions = {
    content: labelText,
    boxStyle: {
       textAlign: "center",
       fontSize: "8pt",
       width: "90px"
    },
    disableAutoPan: false,
    pixelOffset: new google.maps.Size(-45, someOffsetY),
    position: calculatedCenterPosition,
    closeBoxURL: "",
    isHidden: false,
    enableEventPropagation: true,
    pane: "floatPane"
};
var label = new InfoBox(myOptions);
label.open(map, gmarker);

有沒有人處理過這個問題？ 如何解決？

Answer 1

您可以使用MarkerWithLabel

“基本”示例有多個字符。 相關問題： Google maps Marker Label with multiple characters

代碼片段：

 function initMap() { var latLng = new google.maps.LatLng(49.47805, -123.84716); var homeLatLng = new google.maps.LatLng(49.47805, -123.84716); var map = new google.maps.Map(document.getElementById('map_canvas'), { zoom: 13, center: latLng, mapTypeId: google.maps.MapTypeId.ROADMAP }); var marker1 = new MarkerWithLabel({ position: homeLatLng, draggable: true, raiseOnDrag: true, map: map, labelContent: "$425K", labelAnchor: new google.maps.Point(22, 0), labelClass: "labels", // the CSS class for the label labelStyle: { opacity: 0.75 } }); var marker2 = new MarkerWithLabel({ position: new google.maps.LatLng(49.475, -123.84), draggable: true, raiseOnDrag: true, map: map, labelContent: "$395K", labelAnchor: new google.maps.Point(22, 0), labelClass: "labels", // the CSS class for the label labelStyle: { opacity: 1.0 } }); var iw1 = new google.maps.InfoWindow({ content: "Home For Sale" }); var iw2 = new google.maps.InfoWindow({ content: "Another Home For Sale" }); google.maps.event.addListener(marker1, "click", function(e) { iw1.open(map, this); }); google.maps.event.addListener(marker2, "click", function(e) { iw2.open(map, this); }); } google.maps.event.addDomListener(window, 'load', initMap);

 .labels { color: red; background-color: white; font-family: "Lucida Grande", "Arial", sans-serif; font-size: 10px; font-weight: bold; text-align: center; width: 40px; border: 2px solid black; white-space: nowrap; }

 <script src="http://maps.googleapis.com/maps/api/js"></script> <script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerwithlabel/src/markerwithlabel.js"></script> <div id="map_canvas" style="height: 400px; width: 100%;"></div> <div id="log"></div>

Answer 2

對於像我這樣發現 2021 年的人。

在標記上設置增加/減少的 zIndex 將解決這個問題。 （取決於您想要在頂部的標記）