Google放置Api PlaceDetails [英] Google place Api PlaceDetails
本文介绍了Google放置Api PlaceDetails的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
你好下面的代码给出了地方搜索，但它只显示我想要信息框中地点的完整细节的名字。下面的代码由DR.Molle提供
http://jsfiddle.net/doktormolle/C5ZtK/
下面是检索placedetails但无法使其工作的代码
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://www.geocodezip.com/v3_GoogleEx_place-search_starbucks3.html
代码段：
$ b
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 =新的google.maps.places.PlacesService（map）; service.search（request，callback）;} else {alert（Geocode由于以下原因不成功：+ status）;}}）;} function callback（results ，状态）{if（status == google.maps.places.PlacesServiceStatus.OK）{for（var i = 0; i< results.length; i ++）{crea teMarker（结果[I]）; }}}函数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 =_ blankhref ='+ place.website +'>'+ place.website +'< / a>'; contentStr + ='< br>'+ place.types +'< / p>'; infowindow.setContent（contentStr）; infowindow.open（map，marker）;}}）;}）; gmarkers.push（标记）; 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;宽度：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> < / table>
Hi the below code gives the place search , but it is showing only names i want the complete details of the places in the infobox..the below code isprovided by DR.Molle
http://jsfiddle.net/doktormolle/C5ZtK/
below is the code for retrieving the placedetails but not able to make it working
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);
});
});
}
i checked the developers page but not able to get much from it Any help would be appreciated
解决方案
Example that gets the place details for the clicked marker:
http://www.geocodezip.com/v3_GoogleEx_place-search_starbucks3.html
code snippet:
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放置Api PlaceDetails的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
