在Google Maps API中,可以通过以下步骤将街景缩略图添加到标记工具提示:
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 37.7749, lng: -122.4194}, // 设置地图中心点的经纬度
zoom: 12 // 设置地图缩放级别
});
var marker = new google.maps.Marker({
position: {lat: 37.7749, lng: -122.4194}, // 设置标记的经纬度
title: 'San Francisco' // 设置标记的标题
});
StreetViewService
对象获取指定位置的街景数据。var streetViewService = new google.maps.StreetViewService();
streetViewService.getPanorama({location: marker.getPosition()}, function(data, status) {
if (status === 'OK') {
// 获取到街景数据后,可以通过以下步骤将街景缩略图添加到标记工具提示中
var panorama = data.location.pano;
var panoOptions = {
pano: panorama,
pov: {
heading: 0,
pitch: 0
},
visible: true
};
var streetViewPanorama = new google.maps.StreetViewPanorama(
document.getElementById('pano'), panoOptions);
map.setStreetView(streetViewPanorama);
} else {
console.error('Street View data not found for this location.');
}
});
在上述代码中,getPanorama
方法用于获取指定位置的街景数据。如果获取成功,会返回一个包含街景数据的对象,其中location.pano
属性表示街景的唯一标识符。
marker.addListener('click', function() {
var streetViewUrl = 'https://maps.googleapis.com/maps/api/streetview?size=300x200&location=' + marker.getPosition().lat() + ',' + marker.getPosition().lng();
var content = '<div><img src="' + streetViewUrl + '"></div>';
var infowindow = new google.maps.InfoWindow({
content: content
});
infowindow.open(map, marker);
});
在上述代码中,通过创建一个InfoWindow
对象,并将包含街景缩略图的HTML内容作为参数传递给content
属性,然后调用open
方法将标记工具提示显示在地图上。
这样,当用户点击标记时,将会显示包含街景缩略图的标记工具提示。
领取专属 10元无门槛券
手把手带您无忧上云