Question

我开发了具有自动填充功能的Google地图位置搜索功能。现在，我想添加另一个功能，例如当前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）或评估为false的内容（删除图片）
<强> node

应该呈现图像的元素（应该为空，将删除现有内容）
<强> map

Maps - 实例
<强> size （可选）

字符串（在https://developers.google.com/maps/documentation/staticmaps/#Imagesizes中定义）
<强> key （可选）

您的API密钥（当您使用密钥时，必须在API控制台中启用街景图像API ）

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

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

1 个答案: