避免信息框重叠 - 谷歌地图v3

时间:2013-03-04 14:25:52

标签: google-maps-api-3 overlapping infobox

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

我已经尝试过蜘蛛侠,但在这种情况下并不合适。

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

第二种可能性是通过javascript改变位置,但鉴于我缺乏javascript和amp;的专业知识。谷歌地图,我一直无法做到这一点。我也没有找到一个可以破解的例子。

会欣赏一些正确方向的信息/建议/指示。

由于 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;

}

0 个答案:

没有答案