如何在谷歌地图infowindow标记中显示某些名称

时间:2016-08-10 21:13:15

标签: javascript google-maps google-maps-api-3

我有点卡住,想知道是否有人可以提供帮助,这是我的代码片段:

function test(person,address)
{
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 10,
        center: new google.maps.LatLng(43.761539, -79.411079),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    var infowindow = new google.maps.InfoWindow()
    var marker, i;
    var clatlng, clat, clng;
    for (i = 0; i < address.length; i++) {  
        geocoder = new google.maps.Geocoder();
        geocoder.geocode( { 'address': address[i]}, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                clat = results[0].geometry.location.lat();
                clng = results[0].geometry.location.lng();
                clatlng = new google.maps.LatLng(clat, clng);
                marker = new google.maps.Marker({
                    map: map,
                    position: results[0].geometry.location
                });
                google.maps.event.addListener(marker, 'click', (function(marker) {
                    //cant add information here dont know why...
                    return function() {
                        infowindow.setContent(person[0].cName + "<br>" + results[0].formatted_address);
                        infowindow.open(map, marker);
                    }
                })(marker));
            }
        });
    }//for
}//function

我传递了一组地址和名字。我在点击地图上标记的信息窗口时,一直试图让每个标记显示该人的姓名和地址。这就是我遇到问题的地方,我通过使用结果[0] .formatted_address解决了地址问题,但我不确定如何将特定用户显示到该标记。任何提示将不胜感激。

1 个答案:

答案 0 :(得分:0)

您需要在名称上使用函数闭包以及标记的单击侦听器中的标记。由于人员的名称也需要在地理编码器的回调中可用,因此您还需要在地理编码器回调函数上使用函数闭包。

相关问题

proof of concept fiddle

代码段

&#13;
&#13;
function test(person, address) {
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 5,
      center: new google.maps.LatLng(43.761539, -79.411079),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    var infowindow = new google.maps.InfoWindow()
    var marker, i;
    var clatlng, clat, clng;
    for (i = 0; i < address.length; i++) {
      geocoder = new google.maps.Geocoder();
      geocoder.geocode({
        'address': address[i]
      }, (function(name) {
        return function(results, status) {
          if (status == google.maps.GeocoderStatus.OK) {
            clat = results[0].geometry.location.lat();
            clng = results[0].geometry.location.lng();
            clatlng = new google.maps.LatLng(clat, clng);
            marker = new google.maps.Marker({
              map: map,
              position: results[0].geometry.location
            });
            google.maps.event.addListener(marker, 'click', (function(marker, name) {
              //cant add information here dont know why...
              return function() {
                infowindow.setContent(name + "<br>" + results[0].formatted_address);
                infowindow.open(map, marker);
              }
            })(marker, name));
          }
        }
      })(person[i]));
    } //for
  } //function

function initialize() {
  test(["fred", "george", "frank"], ["New York, NY", "Newark, NJ", "Toronto, CA"]);
}
google.maps.event.addDomListener(window, "load", initialize);
&#13;
html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
&#13;
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>
&#13;
&#13;
&#13;