Google Places JS API显示评论 [英] Google Places JS API Show Reviews
本文介绍了Google Places JS API显示评论的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
JS API，而不是web服务： 我无法显示Place Details响应中包含的0-5条评论：
https://developers.google.com/maps/documentation/javascript / places＃place_details_responses
到目前为止，我已经能够显示这些项目：
<但是当我尝试显示 details.reviews 时，它只显示：
$ b [object object]，[object Object]，[object Object ]，[对象对象]，[对象对象]
有没有人可以显示评论？
function create标记（地点）{
var image ='img / marker.png';
var placeLoc = place.geometry.location;
var marker = new google.maps.Marker（{
map：map，
icon：image，
position：place.geometry.location
}）;
var request = {reference：place.reference};
service.getDetails（request，function（details，status）{
google.maps.event.addListener（marker，'click'，function（）{
if（status == google.maps.places.PlacesServiceStatus.OK）{
//将导航链接中的空白空格替换为+符号
var navLink = details.formatted_address;
navLink = navLink.replace（/ \s / g，+）;
$（'。navLink'）。html（navLink）;
// Match Rating bar width以评级数
var ratingWidth =（details.rating * 20）+px;
$（'。rating-bar> span'）。css（'width'，'+ ratingWidth + '）;
var contentStr ='< h5 class =info-window-title>'+ details.nam e +'< / h5>< ul class =info-window>';
if（!! details.rating）contentStr + ='< li>评分：& nbsp;< div class =rating-bar>< span style = width：'+ ratingWidth +'> ;< /跨度>< / DIV><强> '+ details.rating +' < /强>< /立GT;';
if（!! details.open_now）contentStr + ='< li class =open-now>'+ details.open_now +'< / li>';
contentStr + ='< li>'+ details.formatted_address +'< / li>';
contentStr + ='< li class = gray>'+ details.types +'< / li>';
//检查平台发送适当的应用链接
if（（navigator.platform.indexOf（iPhone）！= -1））{
contentStr + ='< li class =link>< a class = navLink href = http：//maps.apple.com/？daddr = Current + Location& saddr ='+ navLink +'>< i class =fa fa-automobile >< I> /;获取路线< / a>< / li>';
} else {
contentStr + ='< li class =link>< a class = navLink href = https：//www.google.com/maps/dir/Current+Location /'+ navLink +'>< i class =fa fa-automobile>< / i>获取路线< / a>< / li>';
}
if（!! details.formatted_phone_number）contentStr + ='< li class =link>< a href =tel：'+ details.formatted_phone_number +' >< i class =fa fa-phone>< / i> + details.formatted_phone_number +< / A>< /立GT;;
if（!! details.reviews）contentStr + ='< li>'+ details.reviews +'< / li>';
contentStr + ='< / ul>';
infowindow.setContent（contentStr）;
infowindow.open（map，marker）;
} else {
var contentStr =< h5>无结果，status =+ status +< / h5>;
infowindow.setContent（contentStr）;
infowindow.open（map，marker）;
}
}）;
}）;
解决方案 details.reviews 不会返回一个字符串（您在输出中获得的是此数组的字符串表示形式），它是一个包含多达5个审阅对象的数组。你必须遍历这个数组的项目，并自己准备输出。
一个准备评论的示例函数：
（函数（rs / * reviews-array * /，fx / * review-parser * /）{
var list = document.createElement（'ul '）;
rs.forEach（function（r）{
list.appendChild（fx（r））;
}）;
return'< ul> ;'+ list.innerHTML +'< / ul>';
//当您要返回一个DOMNode
返回列表时，移除上一行;
}
.reviews，
function（r / * single review * /）{
console.log（r.aspects）
var item = document.createElement（'li'），
review = item.appendChild（document.createElement（'ul'））
props = {
author_name：'author'，
rating：'rating'，
text：'text '
};
item.appendChild（document.createElement（'h6'））;
item.lastChild.appendChild（document.createElement（'a'））;
item.lastChild.lastChild
.appendChild（document.createTextNode（r.author_name））;
if（r.author_url）{
item.lastChild.lastChild.setAttribute（'href'，r.author_url）;
item.lastChild.appendChild（document.createTextNode（'（'+ r.rating +
'）'））;
if（r.aspects&& r.aspects.length）{
item.appendChild（document.createElement（'ul'））;
r.aspects.forEach（function（a）{
item.lastChild.appendChild（document.createElement（
'li'））;
item.lastChild.lastChild
.appendChild（document.createTextNode（a.type +
'：'+ a.rating））
}）;
}
item.appendChild（document.createElement（'p'））;
item.lastChild.appendChild（document.createTextNode（r.text））;
退货项目;
））
演示：
var map，infowindow，service;函数initialize（）{map = new google.maps.Map（document.getElementById（'map-canvas'），{center：new google.maps.LatLng（-33.8665433,151.1956316），zoom：15}）; var request = {placeId：'ChIJN1t_tDeuEmsRUsoyG83frY4'}; infowindow = new google.maps.InfoWindow（）; service = new google.maps.places.PlacesService（map）; service.getDetails（request，function（place，status）{if（status == google.maps.places.PlacesServiceStatus.OK）{createMarker（place）}}）; } function createMarker（place）{var image ='img / marker.png'; var placeLoc = place.geometry.location; var marker = new google.maps.Marker（{map：map，// icon：image，position：place.geometry.location}）; var request = {reference：place.reference}; service.getDetails（request，function（details，status）{google.maps.event.addListener（marker，'click'，function（）{if（status == google.maps.places.PlacesServiceStatus.OK）{// Replace导航链接中带有+符号的空白空间var navLink = details.formatted_address; navLink = navLink.replace（/ \s / g，+）; $（'。navLink'）。html（navLink）; //匹配评级条宽度至额定数量var ratingWidth =（details.rating * 20）+px; $（'。rating-bar> span'）.css（'width'，''+ ratingWidth +'）; var contentStr ='< h5 class =info-window-title>'+ details.name +'< / h5>< ul class =info-window>'if（!! details。评分）< span style = width：'+ ratingWidth +'>< / span>< / rating>评分：& nbsp;< div class =rating-bar< div>< strong>'+ details.rating +'< / strong>< / li> '; if（!! details.open_now）contentStr + ='< li class =open-now>'+ details.open_now +'< / li>'; contentStr + ='< li>'+ details.formatted_address +'< / li>'; contentStr + ='< li class = gray>'+ details.types +'< / li>'; //（检查平台发送适当的应用链接if（（navigator.platform.indexOf（iPhone）！= -1））{contentStr + ='< li class =link>< a class = navLink href = http：//maps.apple.com/？daddr =当前位置& saddr ='+ navLink +'>< i class =fa fa-automobile>< / i>获取路线< / a>< / li>'; } else {contentStr + ='< li class =link>< a class = navLink href = https：//www.google.com/maps/dir/Current+Location/'+ navLink +'> < i class =fa fa-automobile>< / i>获取路线< / a>< / li>'; } if（!! details.formatted_phone_number）contentStr + ='< li class =link>< a href =tel：'+ details.formatted_phone_number +'>< i class =fa fa-电话>< I> /; '+ details.formatted_phone_number +'< / a>< / li>';如果（!! details.reviews&& detail.reviews.length）{contentStr + ='< li> Reviews'+（function（rs / * reviews-array * /，fx / * review-parser * /） {var list = document.createElement（'ul'）; rs.forEach（function（r）{list.appendChild（fx（r））;}）; return'< ul>'+ list.innerHTML +'< /（>'; //当你想返回一个DOMNode返回列表时，移除上一行;}（details.reviews，function（r / * single review * /）{console.log（r.aspects）var item = document .createElement（'li'），review = item.appendChild（document.createElement（'ul'））props = {author_name：'author'，rating：'rating'， text：'text'}; item.appendChild（使用document.createElement（ H6’ ））; item.lastChild.appendChild（使用document.createElement（ A））; item.lastChild.lastChild .appendChild（document.createTextNode（r.author_name））; if（r.author_url）{item.lastChild.lastChild.setAttribute（'href'，r.author_url）; } item.lastChild.appendChild（document.createTextNode（'（'+ r.rating +'）'））; if（r.aspects&& r.aspects.length）{item.appendChild（document.createElement（'ul'））; r.aspects.forEach（function（a）{item.lastChild.appendChild（document.createElement（'li'））; item.lastChild.lastChild .appendChild（document.createTextNode（a.type +'：'+ a.rating ））}）; } item.appendChild（document.createElement（'p'））; item.lastChild.appendChild（document.createTextNode（r.text））;归还物品; }））+'< / li>'; } contentStr + ='< / ul>'; console.log（contentStr）infowindow.setContent（contentStr）; infowindow.open（map，marker）; } else {var contentStr =< h5>无结果，status =+ status +< / h5>; infowindow.setContent（contentStr）; infowindow.open（map，marker）; }}）; }）; } google.maps.event.addDomListener（window，'load'，initialize）;
html，body，＃map-canvas {height：100％; margin：0px; < script src =http：//
//code.jquery.com/jquery-latest.js\"></script><script src =https://maps.googleapis.com/maps/api/js?v=3&libraries=places >< / script>< div id =map-canvas>< / div>
JS API, not web service:
I'm having trouble displaying the 0-5 reviews included with the Place Details Responses: https://developers.google.com/maps/documentation/javascript/places#place_details_responses
So far I have been able to display these items:
- details.name
- details.rating
- details.open_now
- details.formatted_address
- details.types
- details.formatted_phone_number
But when I try to show details.reviews it just displays:
[object Object],[object Object],[object Object],[object Object],[object Object]
Has anyone had any success displaying the reviews?
function createMarker(place) {
var image = 'img/marker.png';
var placeLoc = place.geometry.location;
var marker = new google.maps.Marker({
map: map,
icon: image,
position: place.geometry.location
});
var request = { reference: place.reference };
service.getDetails(request, function(details, status) {
google.maps.event.addListener(marker, 'click', function() {
if (status == google.maps.places.PlacesServiceStatus.OK) {
// Replace empty spaces in navigation link with + symbols
var navLink = details.formatted_address;
navLink = navLink.replace(/\s/g, "+");
$('.navLink').html(navLink);
// Match Rating bar width to rating number
var ratingWidth = (details.rating*20)+"px";
$('.rating-bar > span').css('width', "'"+ratingWidth+"'");
var contentStr = '<h5 class="info-window-title">'+details.name+'</h5><ul class="info-window">';
if (!!details.rating) contentStr += '<li>Rating: <div class="rating-bar"><span style=width:'+ratingWidth+'></span></div><strong>'+details.rating+'</strong></li>';
if (!!details.open_now) contentStr += '<li class="open-now">'+details.open_now+'</li>';
contentStr += '<li>'+details.formatted_address+'</li>';
contentStr += '<li class=gray>'+details.types+'</li>';
// Check for platform to send appropriate app link
if ((navigator.platform.indexOf("iPhone") != -1)) {
contentStr += '<li class="link"><a class=navLink href=http://maps.apple.com/?daddr=Current+Location&saddr='+navLink+'><i class="fa fa-automobile"></i> Get Directions</a></li>';
} else {
contentStr += '<li class="link"><a class=navLink href=https://www.google.com/maps/dir/Current+Location/'+navLink+'><i class="fa fa-automobile"></i> Get Directions</a></li>';
}
if (!!details.formatted_phone_number) contentStr += '<li class="link"><a href="tel:'+details.formatted_phone_number+'"><i class="fa fa-phone"></i> '+details.formatted_phone_number+'</a></li>';
if (!!details.reviews) contentStr += '<li>'+details.reviews+'</li>';
contentStr += '</ul>';
infowindow.setContent(contentStr);
infowindow.open(map,marker);
} else {
var contentStr = "<h5>No Result, status="+status+"</h5>";
infowindow.setContent(contentStr);
infowindow.open(map,marker);
}
});
});
}
解决方案
details.reviews doesn't return a string(what you get in the output is the string-representation of this array), it's an array which contains up to 5 review-objects. you must iterate over the items of this array and prepare the output on your own.
A sample-function which prepares the reviews:
(function (rs /*reviews-array*/ , fx /*review-parser*/ ) {
var list = document.createElement('ul');
rs.forEach(function (r) {
list.appendChild(fx(r));
});
return '<ul>' + list.innerHTML + '</ul>';
//remove the previous line when you want to return a DOMNode
return list;
}
(details.reviews,
function (r /*single review*/ ) {
console.log(r.aspects)
var item = document.createElement('li'),
review = item.appendChild(document.createElement('ul'))
props = {
author_name: 'author',
rating: 'rating',
text: 'text'
};
item.appendChild(document.createElement('h6'));
item.lastChild.appendChild(document.createElement('a'));
item.lastChild.lastChild
.appendChild(document.createTextNode(r.author_name));
if (r.author_url) {
item.lastChild.lastChild.setAttribute('href', r.author_url);
}
item.lastChild.appendChild(document.createTextNode('(' + r.rating +
')'));
if (r.aspects && r.aspects.length) {
item.appendChild(document.createElement('ul'));
r.aspects.forEach(function (a) {
item.lastChild.appendChild(document.createElement(
'li'));
item.lastChild.lastChild
.appendChild(document.createTextNode(a.type +
':' + a.rating))
});
}
item.appendChild(document.createElement('p'));
item.lastChild.appendChild(document.createTextNode(r.text));
return item;
}
))
Demo:
var map, infowindow, service;
function initialize() {
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(-33.8665433, 151.1956316),
zoom: 15
});
var request = {
placeId: 'ChIJN1t_tDeuEmsRUsoyG83frY4'
};
infowindow = new google.maps.InfoWindow();
service = new google.maps.places.PlacesService(map);
service.getDetails(request, function(place, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
createMarker(place)
}
});
}
function createMarker(place) {
var image = 'img/marker.png';
var placeLoc = place.geometry.location;
var marker = new google.maps.Marker({
map: map,
//icon: image,
position: place.geometry.location
});
var request = {
reference: place.reference
};
service.getDetails(request, function(details, status) {
google.maps.event.addListener(marker, 'click', function() {
if (status == google.maps.places.PlacesServiceStatus.OK) {
// Replace empty spaces in navigation link with + symbols
var navLink = details.formatted_address;
navLink = navLink.replace(/\s/g, "+");
$('.navLink').html(navLink);
// Match Rating bar width to rating number
var ratingWidth = (details.rating * 20) + "px";
$('.rating-bar > span').css('width', "'" + ratingWidth + "'");
var contentStr = '<h5 class="info-window-title">' + details.name + '</h5><ul class="info-window">';
if (!!details.rating) contentStr += '<li>Rating: <div class="rating-bar"><span style=width:' + ratingWidth + '></span></div><strong>' + details.rating + '</strong></li>';
if (!!details.open_now) contentStr += '<li class="open-now">' + details.open_now + '</li>';
contentStr += '<li>' + details.formatted_address + '</li>';
contentStr += '<li class=gray>' + details.types + '</li>';
// Check for platform to send appropriate app link
if ((navigator.platform.indexOf("iPhone") != -1)) {
contentStr += '<li class="link"><a class=navLink href=http://maps.apple.com/?daddr=Current+Location&saddr=' + navLink + '><i class="fa fa-automobile"></i> Get Directions</a></li>';
} else {
contentStr += '<li class="link"><a class=navLink href=https://www.google.com/maps/dir/Current+Location/' + navLink + '><i class="fa fa-automobile"></i> Get Directions</a></li>';
}
if (!!details.formatted_phone_number) contentStr += '<li class="link"><a href="tel:' + details.formatted_phone_number + '"><i class="fa fa-phone"></i> ' + details.formatted_phone_number + '</a></li>';
if (!!details.reviews && details.reviews.length) {
contentStr += '<li>Reviews' +
(function(rs /*reviews-array*/ , fx /*review-parser*/ ) {
var list = document.createElement('ul');
rs.forEach(function(r) {
list.appendChild(fx(r));
});
return '<ul>' + list.innerHTML + '</ul>';
//remove the previous line when you want to return a DOMNode
return list;
}
(details.reviews,
function(r /*single review*/ ) {
console.log(r.aspects)
var item = document.createElement('li'),
review = item.appendChild(document.createElement('ul'))
props = {
author_name: 'author',
rating: 'rating',
text: 'text'
};
item.appendChild(document.createElement('h6'));
item.lastChild.appendChild(document.createElement('a'));
item.lastChild.lastChild
.appendChild(document.createTextNode(r.author_name));
if (r.author_url) {
item.lastChild.lastChild.setAttribute('href', r.author_url);
}
item.lastChild.appendChild(document.createTextNode('(' + r.rating +
')'));
if (r.aspects && r.aspects.length) {
item.appendChild(document.createElement('ul'));
r.aspects.forEach(function(a) {
item.lastChild.appendChild(document.createElement(
'li'));
item.lastChild.lastChild
.appendChild(document.createTextNode(a.type +
':' + a.rating))
});
}
item.appendChild(document.createElement('p'));
item.lastChild.appendChild(document.createTextNode(r.text));
return item;
}
))
+ '</li>';
}
contentStr += '</ul>';
console.log(contentStr)
infowindow.setContent(contentStr);
infowindow.open(map, marker);
} else {
var contentStr = "<h5>No Result, status=" + status + "</h5>";
infowindow.setContent(contentStr);
infowindow.open(map, marker);
}
});
});
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3&libraries=places"></script>
<div id="map-canvas"></div>
这篇关于Google Places JS API显示评论的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
