谷歌地图及其标记

Question

我有一个标记位置的 JSON 数组被拉入谷歌地图 - 这工作正常。

我也将 infoWindows 链接到每个标记 - 这些也可以正常工作。

但是，当我（在任何浏览器中）单击标记时，信息窗口仅显示在最后添加的标记上方。

这是一个小提琴：http://jsfiddle.net/neuroflux/8WDwn/10/ 这是我的循环：

for (var a = 0; a < dealer_markers.length; a++) {
    var tmpLat = dealer_markers[a].lat;
    var tmpLng = dealer_markers[a].lng;
    var tmpName = dealer_markers[a].name;
    var tmpAdr = dealer_markers[a].adr;
    var tmpTel = dealer_markers[a].pc;
    var tmpPc = dealer_markers[a].tel;

    contentString[a] = '<div id="bg"><h2 class="title">'+tmpName+'</h2><h3 class="address">'+tmpAdr+'</h3><h3 class="pc">'+tmpPc+'</h3><h3 class="telephone">'+tmpTel+'</h3></div>';
    var content = contentString[a];

    dealer[a] = new google.maps.LatLng(tmpLat,tmpLng);

    deal = dealer[a];

    marker[a] = new google.maps.Marker({ 
        map:map,
        position: deal,
        icon:'dealer.png',
        title: "|"+new google.maps.LatLng(dealer[a].Ja,dealer[a].Ka)
    });

    lat = marker[a].position.Ja;
    lng = marker[a].position.Ka;

    compositeLatLng = new google.maps.LatLng(lat,lng);
    mark = marker[a];


    google.maps.event.addListener(mark, 'click', function(a) {
        if (mark.infowindow) {
            mark.infowindow.close();
        }

        mark.infowindow = new google.maps.InfoWindow({ 
            content: contentString[marker.indexOf(this)]
        });

        mark.infowindow.open(map,mark);
    });
}

Answer 1

正如我在评论中所说，您可以使用闭包来解决问题。这是demo。我创建了一个包装函数：

1. 创建一个标记
2. 可选择附加 onclick 处理程序

在那个处理程序内部：

1. 它会在地图上附加一个空白的 infoWindow（如果需要）
2. 隐藏该窗口，更改其内容并在标记上再次显示（逻辑借用自 here）

---

function _newGoogleMapsMarker(param) {
    var r = new google.maps.Marker({
        map: param._map,
        position: new google.maps.LatLng(param._lat, param._lng),
        title: param._head
    });
    if (param._data) {
        google.maps.event.addListener(r, 'click', function() {
            // this -> the marker on which the onclick event is being attached
            if (!this.getMap()._infoWindow) {
                this.getMap()._infoWindow = new google.maps.InfoWindow();
            }
            this.getMap()._infoWindow.close();
            this.getMap()._infoWindow.setContent(param._data);
            this.getMap()._infoWindow.open(this.getMap(), this);
        });
    }
    return r;
}


for (var a = 0; a < dealer_markers.length; a++) {
    .
    .
    .
    var marker = _newGoogleMapsMarker({
        _map: map,
        _lat: tmpLat,
        _lng: tmpLng,
        _head: '|' + new google.maps.LatLng(tmpLat, tmpLng),
        _data: '...'
    });
}

Answer 2

问题是您在循环中创建一个函数，然后在该函数中使用 ma​​rk 所以它总是出现在创建为 ma​​rk 的最后一个标记旁边在每次循环迭代时重新分配

最好不要在循环中创建函数，所以我会这样重写：

var map = null // your map created here

var infowindow = null;

var itemClick = function(a) {
    if (this.infowindow) {
        this.infowindow.close();
    }

    this.infowindow = new google.maps.InfoWindow({
        content: contentString[marker.indexOf(this)]
    });

    this.infowindow.open(this.map, a);

}

for (var a = 0; a < dealer_markers.length; a++) {

    ///  Other code.....

    google.maps.event.addListener(mark, 'click', itemClick);
}