嗨,需要一些关于使用街道视图的想法/建议,我正在使用" api api"以下是我的搜索场所代码
function SearchData(type){
$('#placedata').empty();
var myLatlng = new google.maps.LatLng(parseFloat(searchLatitute), parseFloat(searchLongitute));
map = new google.maps.Map(document.getElementById('map_canvas'), {
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: myLatlng,
zoom: 10});
var request = {location: myLatlng,rankBy: google.maps.places.RankBy.DISTANCE,types: [type]};
var service = new google.maps.places.PlacesService(map);
service.search(request, callback);
}
function callback(results, status,pagination) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
var place = results[i];
createMarker(place);
function createMarker(place) {
var placeLoc = place.geometry.location;
var marker = new google.maps.Marker({map: map,zIndex: 100,position: place.geometry.location});
var request = {reference: place.reference};
service = new google.maps.places.PlacesService(map);
service.getDetails(request, function(details, status) {//alert("address "+details.formatted_address);
if (status == google.maps.places.PlacesServiceStatus.OK) {
$('#placedata').append('<tr><td><a href='+details.url+'>'+details.name+'</a></td></tr>');
}
});
我在网页中显示结果。我想实现的是在每个地址添加街道视图。任何建议,将不胜感激。
您有2个选项:
- 只需使用静态街道图像API提供的图像即可。但如果该地方没有图像,您会得到一个错误图像。
- 请求通过使用getPanoramabylocation()为给定位置的请求街视详细信息,当您可以在此地点没有图像时可以处理案例,但需要进一步的请求,并且您还可以加载Panorama。
<edit>
根据要求,可以像这样处理案例#2(以下代码是您当前服务的替换。getDetails() - 回调):
function(details, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
//create streetViewService-object once
if(!window.streetViewService)window.streetViewService
= new google.maps.StreetViewService;
(function(d){
//append the tr to the table, note the additional td and div
//thats where the panorama will be placed later
var target=$('<tr><td><a href='+
d.url+'>'+d.name+
'</a></td><td><div/></td></tr>');
target.appendTo('#placedata');
//get the panorama
window.streetViewService
.getPanoramaByLocation(d.geometry.location,
50,
function(r,status){
//check if there was an result
if(status==google.maps.StreetViewStatus.OK){
//create the panorama
new google.maps
.StreetViewPanorama(
$('td:last div:last',target)
.css({width:200,height:200})[0],
{pano:r.location.pano});
}
else{
$('td:last div:last',target)
.text('no panorama available');
}
});
})(details)
}
}