信息框的值仅在少数标记上为null

时间:2015-04-06 19:21:02

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

我正在尝试通过Google地方为每个标记获取多个值,它正在运行但由于某种原因,一半标记为细节提供了空值,我不确定原因。

function createMarker(place) {
  var placeLoc = place.geometry.location;
  var marker = new google.maps.Marker({
    map: map,
    position: place.geometry.location
  });

  var request = { reference: place.reference };
  service.getDetails(request, function(details, status) {
    google.maps.event.addListener(marker, 'click', function() {
      infowindow.setContent(details.name + "<br />" + details.formatted_address +"<br />" + details.website + "<br />" + details.rating + "<br />" + details.formatted_phone_number);
      infowindow.open(map, this);
    });
  });
}

这是一个工作小提琴:http://jsfiddle.net/g6mjkLpx/

1 个答案:

答案 0 :(得分:1)

您可能遇到了查询限制。您只应在单击标记时请求详细信息(并且为了避免信息窗口中的“未定义”文本,您应该在将字段添加到信息窗之前检查字段是否存在):

function createMarker(place) {
    var placeLoc = place.geometry.location;
    var marker = new google.maps.Marker({
        map: map,
        position: place.geometry.location
    });

    google.maps.event.addListener(marker, 'click', function (e) {
        var request = {
            reference: place.reference
        };
        service.getDetails(request, function (details, status) {
            if (status == google.maps.places.PlacesServiceStatus.OK) {
                var infoContent = "";
                if (details.name) infoContent += details.name + "<br />";
                if (details.formatted_address) infoContent += details.formatted_address + "<br />";
                if (details.website) infoContent += details.website + "<br />";
                if (details.rating) infoContent += details.rating + "<br />";
                if (details.formatted_phone_number) infoContent += details.formatted_phone_number + "<br>";
                infowindow.setContent(infoContent);
            } else {
                infowindow.setContent("request failed, status=" + status);
            }
            infowindow.open(map, marker);
        });
    });
}

updated fiddle

代码段:

var pyrmont = new google.maps.LatLng(-33.8665433, 151.1956316);

var map = new google.maps.Map(document.getElementById('map'), {
  center: pyrmont,
  zoom: 15
});

var request = {
  location: pyrmont,
  radius: 500,
  types: ['store']
};

var infowindow = new google.maps.InfoWindow();
var service = new google.maps.places.PlacesService(map);
service.nearbySearch(request, callback);

function callback(results, status) {
  if (status == google.maps.places.PlacesServiceStatus.OK) {
    for (var i = 0; i < results.length; i++) {
      createMarker(results[i]);
    }
  }
}

function createMarker(place) {
  var placeLoc = place.geometry.location;
  var marker = new google.maps.Marker({
    map: map,
    position: place.geometry.location
  });

  google.maps.event.addListener(marker, 'click', function(e) {
    var request = {
      reference: place.reference
    };
    service.getDetails(request, function(details, status) {
      if (status == google.maps.places.PlacesServiceStatus.OK) {
        var infoContent = "";
        if (details.name) infoContent += details.name + "<br />";
        if (details.formatted_address) infoContent += details.formatted_address + "<br />";
        if (details.website) infoContent += details.website + "<br />";
        if (details.rating) infoContent += details.rating + "<br />";
        if (details.formatted_phone_number) infoContent += details.formatted_phone_number + "<br>";
        infowindow.setContent(infoContent);
      } else {
        infowindow.setContent("request failed, status=" + status);
      }
      infowindow.open(map, marker);
    });
  });
}

google.maps.event.addDomListener(window, 'load', initialize);
#map {
  display: block;
  width: 800px;
  height: 400px;
}
<script src="http://maps.googleapis.com/maps/api/js?libraries=places"></script>
<div id="map"></div>