谷歌地图及其标记

Google Maps and Their Markers

本文关键字：谷歌地图      更新时间：2023-09-26

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

我也有链接到每个标记的信息窗口 - 这些也可以正常工作。

但是，当我单击标记（在任何浏览器中）时，信息窗口仅出现在上次添加的标记上。

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

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

  1. 创建标记
  2. （可选）附加点击处理程序

在该处理程序中：

  1. 它将一个空白的信息窗口附加到地图（如有必要）
  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: '...'
    });
}

问题是您在循环中创建一个函数，然后在该函数中使用 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);
}
相关文章：