google-maps-api-3 - Google place Api Place详情

Question

嗨，下面的代码给出了地点搜索，但它只显示了我想要信息框中地点的完整详细信息的名称。下面的代码由 DR.Molle 提供

下面是检索放置的细节但无法使其工作的代码

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

我检查了开发人员页面，但无法从中获得太多帮助任何帮助将不胜感激

score 0 · Accepted Answer

获取单击标记的地点详细信息的示例：

http://www.geocodezip.com/v3_GoogleEx_place-search_starbucks3.html

代码片段：

var geocoder = null;
var map;
var service;
var infowindow;
var gmarkers = [];
var bounds = null;

function initialize() {
  geocoder = new google.maps.Geocoder();
  var pyrmont = new google.maps.LatLng(-33.8665433, 151.1956316);

  map = new google.maps.Map(document.getElementById('map'), {
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: pyrmont,
    zoom: 15
  });
  geocoder.geocode({
    'address': "Seattle, WA"
  }, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      var point = results[0].geometry.location;
      bounds = results[0].geometry.viewport;
      var rectangle = new google.maps.Rectangle({
        bounds: bounds,
        fillColor: "#FF0000",
        fillOpacity: 0.4,
        strokeColor: "#0000FF",
        strokeWeigth: 2,
        strokeOpacity: 0.9,
        map: map
      });
      map.fitBounds(bounds);
      var request = {
        bounds: bounds,
        name: "starbucks",
        types: ['establishment']
      };
      infowindow = new google.maps.InfoWindow();
      service = new google.maps.places.PlacesService(map);
      service.search(request, callback);

    } else {
      alert("Geocode was not successful for the following reason: " + status);
    }
  });

}

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
  });
  var request = {
    reference: place.reference
  };
  google.maps.event.addListener(marker, 'click', function() {
    service.getDetails(request, function(place, status) {
      if (status == google.maps.places.PlacesServiceStatus.OK) {
        var contentStr = '<h5>' + place.name + '</h5><p>' + place.formatted_address;
        if (!!place.formatted_phone_number) contentStr += '<br>' + place.formatted_phone_number;
        if (!!place.website) contentStr += '<br><a target="_blank" href="' + place.website + '">' + place.website + '</a>';
        contentStr += '<br>' + place.types + '</p>';
        infowindow.setContent(contentStr);
        infowindow.open(map, marker);
      }
    });

  });
  gmarkers.push(marker);
  var side_bar_html = "<a href='javascript:google.maps.event.trigger(gmarkers[" + parseInt(gmarkers.length - 1) + "],\"click\");'>" + place.name + "</a><br>";
  document.getElementById('side_bar').innerHTML += side_bar_html;
}

function openInfoWindow(id) {
  return true;
}

google.maps.event.addDomListener(window, 'load', initialize);

#map {
  height: 400px;
  width: 600px;
  border: 1px solid #333;
  margin-top: 0.6em;
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
<table border="1">
  <tr>
    <td>
      <div id="map"></div>
    </td>
    <td>
      <div id="side_bar"></div>
    </td>
  </tr>
</table>

google-maps-api-3 - Google place Api Place详情

1 回答 1

Related

Reference