1

我在谷歌地图上显示巡航路线，并用信息框标记每个港口。不幸的是，这些信息框经常重叠。如何避免这种情况？

我已经尝试过 spiderfy，但它不适合这种情况。

更改地图的缩放级别也不是一种选择。理想的情况是一个插件或类似的东西，可以在创建时识别重叠的信息框并重新排列它们。但是，我无法在任何地方找到这样的东西。

第二种可能性是通过 javascript 更改位置，但由于我缺乏 javascript 和谷歌地图的专业知识，我无法实现这一点。我也没有找到可以破解的示例。

将不胜感激一些正确方向的信息/建议/指针。

谢谢 MK

这是我的代码：

function initialize() {
    var arrayMarkers = [];
    var idx = 0;
    var mapLatlng = new google.maps.LatLng(-27.6264198719, 146.9179666042);
    var mapOptions = { center: mapLatlng,
    zoom: 13, 
    mapTypeId: google.maps.MapTypeId.SATELLITE };
    var map = new google.maps.Map(document.getElementById("karte"), mapOptions);
    var bounds = new google.maps.LatLngBounds();

    arrayMarkers[idx] = [];
    arrayMarkers[idx]['breite'] = -33.859261813133;
    arrayMarkers[idx]['laenge'] = 151.200070381165;
    arrayMarkers[idx]['farbe'] = "http://new.kfb.localhost:8888/img/ico/button2_gruen.png";arrayMarkers[idx]['hafen'] = "Abfahrt Sydney";
    arrayMarkers[idx]['link'] = "Karte&#44; Wetter und<br>Landausfl&uuml;ge f&uuml;r<br><a href='hafen.php?hafen=528'>Sydney</a><br>Do, 07.02.13";idx++;
    arrayMarkers[idx] = [];

      .
      .
      . etc.

要将标记和信息框添加到地图，我调用此函数：

function create_markers_v3(map, bounds, arrayMarkers) {

var latLng = [];
var img = [];
var marker = [];
var optionsPort = [];
var ib = [];
var infoWindow = [];

for (i = 0; i < arrayMarkers.length; i++)
{
    latLng[i] = new google.maps.LatLng(arrayMarkers[i]['breite'], arrayMarkers[i]['laenge']);
    bounds.extend(latLng[i]);
    map.fitBounds(bounds);
    img[i] = arrayMarkers[i]['farbe'];
    marker[i] = new google.maps.Marker(
    {
        position: latLng[i],
        map: map,
        icon: img[i]
    });
    optionsPort[i] = {
        content: arrayMarkers[i]['hafen'],
        disableAutoPan: false,
        pixelOffset: new google.maps.Size(3, -20),
        position: new google.maps.LatLng(arrayMarkers[i]['breite'], arrayMarkers[i]['laenge']),
        zIndex: null,
        boxStyle: { 
            opacity: 0.81,
            fontSize: "6pt",
            backgroundColor: "#ffffff",
            padding: "0 2px 1px 3px",
            lineHeight: "1em",
            border: "1px solid #333333"
        },
        closeBoxURL: "",
        isHidden: false,
        pane: "floatPane",
        enableEventPropagation: true
    };
    if (arrayMarkers[i]['hafen'].length > 0)
    {
        ib[i] = new InfoBox(optionsPort[i]);
        ib[i].open(map, marker[i]);
        arrayMarkers[i]['ib'] = ib[i];

        if (arrayMarkers[i]['link'].length > 0)
        {                   
            addInfoWindow(map, arrayMarkers[i], marker[i], i);
        }
    }
}
return arrayMarkers;

}

4

0 回答 0