javascript - 仅少数标记上的信息框值为空

Question

我正在尝试通过 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);
    });
  });
}

这是一个工作 fiddle :http://jsfiddle.net/g6mjkLpx/

Answer 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>