0

こんにちは、ストリートビューの使用に関するアイデア/提案が必要です。場所の詳細を取得しています。以下の場所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>');

    }
});

結果を自分のWebページに表示しています。実装したいのは、各アドレスにストリートビューを追加することです。任意の提案をいただければ幸いです。

4

1 に答える 1

1

2つのオプションがあります：

  1. StaticStreetView-Image-APIによって提供される画像を使用するだけです。ただし、この場所で使用できる画像がない場合は、エラー画像が表示されます。
  2. リクエストStreetView- getPanoramaByLocation（）を使用して指定された場所の詳細。この場所で利用できる画像がない場合に処理できますが、さらにリクエストが必要です。また、パノラマを読み込むこともできます。

<edit>

要求に応じて、ケース＃2は次のように処理できます（次のコードは、現在のservice.getDetails（）-callbackの代わりになります）。

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)


    }
}
于 2012-10-25T11:15:55.117 に答える