Google maps api 3 街景服务：将街景添加到搜索结果中

您好，需要一些关于使用街景的想法/建议， 我正在使用PlacesAPI实现按类型搜索，以获取地点详细信息 下面是我的搜索位置代码

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>');

    }
});

函数搜索数据（类型）{
$（'#placedata'）.empty（）；
var mylatng=new google.maps.LatLng（parseFloat（searchlattute）、parseFloat（searchLongitute））；
map=new google.maps.map（document.getElementById（'map_canvas'）{
mapTypeId:google.maps.mapTypeId.ROADMAP，
中心：myLatlng，
缩放：10}）；
var request={location:myLatlng，rankBy:google.maps.places.rankBy.DISTANCE，types:[type]}；
var service=newgoogle.maps.places.PlacesService（地图）；
服务搜索（请求、回调）；
}
函数回调（结果、状态、分页）{
if（status==google.maps.places.PlacesServiceStatus.OK）{
对于（var i=0；i

我正在我的网页中显示结果。我想实现的是为每个地址添加一个街景。如有任何建议，将不胜感激。

您有2个选项：

只需使用.But提供的图像即可 如果没有这个地方的图片，你会得到一张 错误图像

通过使用请求给定位置的街景详细信息，允许您在该位置没有可用图像时处理该情况，但需要进一步请求，并且您还可以加载全景

---

根据请求，案例#2可以这样处理（以下代码是当前服务的替代代码。getDetails（）-callback）：

功能（详细信息、状态）{
if（status==google.maps.places.PlacesServiceStatus.OK）{
//创建streetViewService对象一次
如果（！window.streetViewService）window.streetViewService
=新的google.maps.StreetViewService；
（职能（d）{
//将tr追加到表中，注意附加的td和div
//这就是全景图稍后将放置的位置
var目标=$（''）；
target.appendTo（“#placedata”）；
//看全景
window.streetview服务
.getPanoramaByLocation（d.geometry.location，
50,
功能（r、状态）{
//检查是否有结果
if（status==google.maps.StreetViewStatus.OK）{
//创建全景图
新谷歌地图
.街景全景(
$（'td:last div:last'，target）
.css（{宽度：200，高度：200}）[0]，
{pano:r.location.pano}）；
}
否则{
$（'td:last div:last'，target）
.text（“无全景可用”）；
}
});
})（详情）
}
}

hi..我尝试了你的代码，但没有任何东西对我有效…我做错什么了吗..这是我尝试的完整代码我应该为每个地址获取streetview？我不建议使用代码并将其粘贴到某个地方。你的代码包含不同的语法错误。我的建议是：@Dr.Molle谢谢你..看起来不错..我想修改一下我展示了这个地方的所有信息，比如地址、电话、网站……我正在做以下事情，但没有得到：）是的……谢谢你给我时间

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)


    }
}