如何解决 Google 地图上多个标记的信息框标签重叠问题

Question

我在 Google 地图上有多个带有自定义图标的标记。标记表示该区域中的多个项目。我添加了一个信息框，作为该区域中有多少项目的标签。

拖动地图时，信息框使用浮动窗格随标记一起移动。

问题是我发现关于此 question 的评论提到标记和信息框位于不同的窗格中，因此信息框显示在所有标记之上。我希望它与其关联的标记处于同一级别。

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

The "basic" example has multiple characters. Related question:

代码片段：

 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: "5K",
     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: "5K",
     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 年的人。

在标记上设置 increasing/decreasing zIndex 将解决此问题。（取决于你想要什么标记在上面）

如何解决 Google 地图上多个标记的信息框标签重叠问题

How to solve the infobox label overlap on multiple markers on Google map

javascript

google-maps

google-maps-api-3

marker

infobox