gpt4 book ai didi

javascript - 如何解决Google map 上多个标记上的信息框标签重叠问题

转载 作者:行者123 更新时间:2023-11-27 23:24:30 27 4
gpt4 key购买 nike

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

当拖动 map 时,信息框使用 float Pane 随标记移动。

问题是我发现了对此的评论 question其中提到标记和信息框位于不同的 Pane 上,因此信息框显示在所有标记之上。我希望它与其相关标记具有相同的级别。

enter image description here

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

有人处理过这个问题吗?怎么解决?

最佳答案

您可以使用MarkerWithLabel

The "basic" example has multiple characters 。相关问题: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>

关于javascript - 如何解决Google map 上多个标记上的信息框标签重叠问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35080536/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com