如何解决Google地图上多个标记上的信息框标签重叠问题 [英] How to solve the infobox label overlap on multiple markers on Google map

问题描述

我使用自定义图标在Google地图上添加了多个标记。标记代表该地区的许多项目。我添加了一个信息框，用作该地区有多少物品的标签。

信息框使用floatpane在拖动地图时随标记一起移动。

问题在于我在

  var labelText ='< div style =color：＃000000>< b>'+ someTitle +'< / b>< / div>'; 
 
 var myOptions = {
 content：labelText，
 boxStyle：{
 textAlign：center，
 fontSize：8pt，
宽度：90px
}，
 disableAutoPan：false，
 pixelOffset：新的google.maps.Size（-45，someOffsetY），
位置：computedCenterPosition，
 closeBoxURL：，
 isHidden：false，
 enableEventPropagation：true，
 pane：floatPane
}; 
 var label = new InfoBox（myOptions）; 
 label.open（map，gmarker）; 
  

有没有人处理过这个问题呢？如何解决？

解决方案

您可以使用 MarkerWithLabel

基本示例有多个字符。相关问题： Google地图标记标签有多个字符

$ b

代码段：

 函数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， //标签labelStyle的CSS类：{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，//标签的CSS类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;背景颜色：白色; font-family：Lucida Grande，Arial，无衬线字体; font-size：10px; font-weight：bold; text-align：center;宽度：40px;边框：2px纯黑色; < script src =>< http://maps.googleapis.com/maps/api/js\"></script><script src =http://google-maps-utility-library-v3.googlecode.com/svn/ >< / script>< div id =map_canvasstyle =height：400px; width：100％;>< / div>< div id = log>< / div>  




I have multiple markers on a Google Map with a custom icon. The marker represents a number of items in that region. I have added an infobox which serves as a label of how many items are in that region.

The infobox uses the floatpane to move with the marker when the map is dragged.

The problem is that I found a comment on this question that mentions that the markers and the infoboxes are on different panes and so the infobox displays over all the markers. I would prefer it to be one the same level as its associated marker.

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);

Has anyone dealt with this issue yet? How can it be solved?

解决方案

You can use MarkerWithLabel

The "basic" example has multiple characters. Related question: Google maps Marker Label with multiple characters

code snippet:

 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>

这篇关于如何解决Google地图上多个标记上的信息框标签重叠问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！