在以前的Google Maps版本(3.32-3.33)中,创建public static void powerNum(int base, int power) {
powerNum(base, power, 1);
}
时可以在place
中指定名为MarkerOptions
的属性。然后,当打开Marker
并使用该InfoWindow
作为定位符时,一个链接“在Google Maps上查看”会自动添加到Marker
内容中。
此sample using 3.33 demonstrates this-单击标记,并注意InfoWindow
中显示的“在Google地图上查看”链接。
此行为以前是documented at 3.exp which is no longer available(但请参见https://web.archive.org/web/20171014093717/developers.google.com/maps/documentation/javascript/3.exp/reference),尽管它似乎没有出现在official docs for e.g. 3.33中,但上面引用的示例在行动。
但是从3.34开始,InfoWindow
中没有自动添加“在Google地图上查看”链接,请参见this sample using the latest version-这是相同的示例,只是引用了最新版的Google地图。
此功能是否故意包含在3.34中?
还是虫子?
或者,是否应该使用另一种方式通过指定其他选项来将“在Google地图上查看”自动添加到3.34中的InfoWindow
上?
还是现在必须手动添加这样的链接?
答案 0 :(得分:1)
对于您是否是错误还是故意删除的问题,我不知道您的答案,但是该链接仅指向场所getDetails
请求返回的场所对象中的URL。 / p>
您可以自己将其添加到信息窗口中,如下所示:
infowindow = new google.maps.InfoWindow({
content: '<div><strong>' + place.name + '</strong><br>' + 'Place ID: ' + place.place_id + '<br>' +
place.formatted_address + '</div>'+
// add "view on google maps
'<div style="border-top: 1px solid rgb(204, 204, 204); margin-top: 9px; padding: 6px; font-size: 13px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; font-family: Roboto, Arial;">'+
'<a href="'+place.url+'" target="_blank" rel="noopener" style="cursor: pointer; color: rgb(66, 127, 237); text-decoration: none;">View on Google Maps</a></div>'
});
代码段:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: -33.866,
lng: 151.196
},
zoom: 15
});
var service = new google.maps.places.PlacesService(map);
service.getDetails({
placeId: 'ChIJN1t_tDeuEmsRUsoyG83frY4'
}, function(place, status) {
if (status === google.maps.places.PlacesServiceStatus.OK) {
var marker = new google.maps.Marker({
map: map,
position: place.geometry.location,
place: {
location: place.geometry.location,
placeId: place.place_id
}
}),
infowindow = new google.maps.InfoWindow({
content: '<div><strong>' + place.name + '</strong><br>' + 'Place ID: ' + place.place_id + '<br>' + place.formatted_address + '</div>' + '<div style="border-top: 1px solid rgb(204, 204, 204); margin-top: 9px; padding: 6px; font-size: 13px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; font-family: Roboto, Arial;"><a href="' + place.url + '" target="_blank" rel="noopener" style="cursor: pointer; color: rgb(66, 127, 237); text-decoration: none;">View on Google Maps</a></div>' +
'<div>API version ' + google.maps.version + '</div>'
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, this);
});
google.maps.event.trigger(marker, 'click');
}
});
}
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?libraries=places&callback=initMap">
</script>