谷歌地图 api 地点搜索自动完成与街景图像按钮

Question

我开发了具有自动完成功能的 Google 地图位置搜索。现在我想添加另一个功能，比如当前的谷歌地图：一旦用户从自动完成下拉列表中选择一个地址，带有街景链接的街景图像将出现在自动完成的底部。单击它会将用户带到比街景小人更准确的街景。

现在我的难题是不知道如何为我的地址创建此街景图像并将其链接到街景模式。

谢谢

Answer 1

执行此操作的函数：

  function fx(latLng,node,map,size,key){
     //remove previous image
     node.innerHTML='';
     if(latLng){
        //create StreetViewService-instance
        if(!map.get('svs')){
          map.set('svs',new google.maps.StreetViewService());
        }
        //request panorama-data
        map.get('svs').getPanoramaByLocation(latLng,50,function(data, status){
          if (status == google.maps.StreetViewStatus.OK) {
            //create the image
            var img=new Image(),
            //collect the parameters for the static image
            params=['size='+(size||'200x100'),
                    'location='+latLng.toUrlValue(),
                    (key)?'key='+key:''];
            //set the src
            img.src='https://maps.googleapis.com/maps/api/streetview?'+
                     params.join('&');
            img.style.cursor='pointer';
            img.style.height='0';
            img.title='StreetView';
            //add click-listener
            google.maps.event.addDomListener(img,'click',function(){
              var pano=map.getStreetView();
              pano.setPano(data.location.pano);
              pano.setVisible(true);
            });
            //animate it
            google.maps.event.addDomListener(img,'load',function(){
              var that=this,
                  timer=setInterval(function(){
                    var h=that.offsetHeight;
                    if(h<that.naturalHeight){
                      that.style.height=Math.min(h+5,that.naturalHeight)+'px';
                    }
                    else{
                      clearInterval(timer);
                    }
                  },10);

            });
            //append the image to the node
            node.appendChild(img);

          }
        });
     }
  }

函数参数：

• latLng

  latLng（例如geometry.location）或评估为假的东西（删除图像）

• node

  应该渲染图像的元素（应该为空，现有内容将被删除）

• map

  Maps-实例

• size（可选）

  一个字符串（定义在https://developers.google.com/maps/documentation/staticmaps/#Imagesizes）

• key（可选）

  您的 API 密钥（当您使用密钥时，必须在 API 控制台中启用 Street View Image API）

演示：http://jsfiddle.net/doktormolle/4x8gvfrx/