谷歌地图及其标记

Question

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

我还有信息窗口链接到每个标记 - 这些也很好用。

然而，当我点击一个标记（在任何浏览器中），信息窗口只出现在最后添加的标记上。

这是一个fiddle：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);
    });
}

- Barrie Reader

---

我认为你需要使用闭包。让我检查一下。 - Salman A

请缩减jsfiddle示例中的代码，以便我们可以确定问题。 - Argiropoulos Stavros

Answer 1

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

1. 创建一个标记
2. 可选地附加单击处理程序

在该处理程序内：

1. 如果需要，它会将空白 infoWindow 附加到地图上
2. 它隐藏该窗口，更改其内容，然后再次显示它以覆盖标记（逻辑借鉴自此处）

---

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: '...'
    });
}

- Salman A

Answer 2

问题在于您正在循环中创建一个函数，然后在该函数内部使用mark，因此它将始终出现在上一个标记旁边，因为在每次循环迭代中都会重新分配mark。

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

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

- David

---

很抱歉，我现在没有时间仔细阅读你的代码。我的回答是基于你提供的片段，但是在快速浏览了你的代码之后，我发现它不会起作用，因为你创建标记的范围有问题。如果问题在未被解决前没有得到答案，我会尝试再看一下。 - David