Google地图及其标记 [英] Google Maps and Their Markers

问题描述

我也有infoWindows链接到每个标记 - 这些也是工作得很好。

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

这是一个小提琴： 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 =庄家[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）; 
}）; 
} 
  

解决方案

，你可以使用闭包来解决这个问题。这里是演示。我创建了一个包装函数：
$ b

1. 创建一个标记


2. 可选地附加一个onclick处理函数
li>

在该处理程序中：

1. 将空白的infoWindow添加到地图中（如有必要）


2. 它隐藏该窗口，更改其内容并在标记上再次显示（逻辑借用自）

$ / $>

---

 函数_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  - > onclick事件的标记如果（！this.getMap（）._ infoWindow）{
 this.getMap（）._ infoWindow = new google.maps.InfoWindow（）; 
} 
被附加
 .getMap（）._ infoWindow.close（）; 
 this.getMap（）._ infoWindow.setContent（param._data）; 
 this.getMap（）._ infoWindow.open（this.getMap（），这个）; 
}）; 
} 
 return r; 
} 
 
 
（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：'...'
}）; 
} 
  

I have a JSON array of Marker positions being pulled into a Google map - This works fine.

I also have infoWindows linked to each of those markers - These also work fine.

However, when I click a marker (in any browser), the infoWindow only appears over the last added marker.

Here is a fiddle: http://jsfiddle.net/neuroflux/8WDwn/10/ and here is my loop:

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

解决方案

As I stated in my comment, you can use a closure to work around the problem. Here is the demo. I created a wrapper function that:

1. creates a marker
2. optionally attaches an onclick handler

Inside that handler:

1. it attaches a blank infoWindow to the map (if necessary)
2. it hides that window, changes its content and shows it again over the marker (logic borrowed from 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: '...'
    });
}

这篇关于Google地图及其标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！