繁体   English   中英

Google Maps JavaScript Places API-网址未定义

[英]Google Maps JavaScript Places API - URL undefined

我正在将Google Maps API集成到我正在工作的网站中。 在大多数情况下,它的性能都令人满意。 但是,当打电话给附近的搜索服务时,我很难获得返回的网址(到该位置的Google地图页面)。 根据我对Google文档的了解,此调用返回的PlaceResult对象具有各种属性,包括url。我能够正确访问其他两个属性,即name和Neighborhood,但是url属性返回为未定义。 可能是什么问题? 谢谢。

相关代码段:

var keyword =  document.getElementById("searchBox").value;
var requestOptions = {
location: { lat: 37.3011339, lng: -89.5770238},
radius: '5000',
keyword: keyword
};

placesService = new google.maps.places.PlacesService(hotelMap);
placesService.nearbySearch(requestOptions, findCallback);

});

}; // end initiallize

function findCallback(results, status) {

var resultsList = "";


  if (status == google.maps.places.PlacesServiceStatus.OK) {

    for (var i = 0; i < results.length; i++) {

       alert(results[i].url); // this returns undefined           
     resultsList += "<li>" + results[i].name + ": " + results[i].vicinity + " - <a href='" + results[i].url + "'>View Details</a></li>";

    }

    document.getElementById("searchList").innerHTML = resultsList;



  } 
}

以供参考:

https://developers.google.com/maps/documentation/javascript/reference#PlaceResult

它看起来像该属性是不可用的PlaceResult在返回nearbySearch查询。 来自该查询返回的结果的placeIds的详细信息请求,返回具有该属性可用的结果。

根据我对文档的阅读,应该返回“有限的” PlaceResult的唯一查询是radarSearch ,但这似乎并不是它的工作方式。

概念证明

代码段:

 var geocoder; var hotelMap; var infowindow = new google.maps.InfoWindow(); function initialize() { hotelMap = new google.maps.Map( document.getElementById("map_canvas"), { center: new google.maps.LatLng(37.4419, -122.1419), zoom: 13, mapTypeId: google.maps.MapTypeId.ROADMAP }); var keyword = document.getElementById("searchBox").value; var requestOptions = { location: { lat: 37.3011339, lng: -89.5770238 }, radius: '5000', keyword: keyword }; placesService = new google.maps.places.PlacesService(hotelMap); placesService.nearbySearch(requestOptions, findCallback); }; // end initiallize function findCallback(results, status) { var resultsList = ""; if (status == google.maps.places.PlacesServiceStatus.OK) { var bounds = new google.maps.LatLngBounds(); for (var i = 0; i < results.length; i++) { console.log(results[i].url); console.log(results[i]); resultsList += "<li>" + results[i].name + ": " + results[i].vicinity + " - <a href='" + results[i].url + "'>View Details</a></li>"; var marker = new google.maps.Marker({ position: results[i].geometry.location, map: hotelMap, title: results[i].name, placeId: results[i].place_id }); bounds.extend(marker.getPosition()); google.maps.event.addListener(marker, 'click', (function(marker) { return function(evt) { var service = new google.maps.places.PlacesService(hotelMap); service.getDetails({ placeId: this.placeId }, function(place, status) { if (status === google.maps.places.PlacesServiceStatus.OK) { var content = '<div><strong>' + place.name + '</strong><br>' + 'Place ID: ' + place.place_id + '<br>' + place.formatted_address + '<br>'; if (place.url) { content += '<a href=' + place.url + ' target="_blank">[link]</a>'; } content += '</div>'; infowindow.setContent(content); infowindow.setPosition(place.geometry.location); infowindow.open(hotelMap, marker); } }); } })(marker)); } hotelMap.fitBounds(bounds); } document.getElementById("searchList").innerHTML = resultsList; } google.maps.event.addDomListener(window, "load", initialize); 
 html, body, #map_canvas { height: 100%; width: 100%; margin: 0px; padding: 0px } 
 <script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script> <input id="searchBox" value="coffee" /> <div id="map_canvas"></div> <div id="searchList"></div> 

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM