Javascript 谷歌地图API V3-街景_Javascript_Google Maps Api 3

Javascript 谷歌地图API V3-街景

javascript google-maps-api-3

Javascript 谷歌地图API V3-街景,javascript,google-maps-api-3,Javascript,Google Maps Api 3,我正在尝试将Google maps V3 API集成到我们的网站中。我需要读取地址并将其设置为地图API，以便地图将显示该地址的街道视图所以我需要三点帮助如何读取地址值示例：var streetAddressArray=getElementsByAttribute（parent.document.forms[0]、“*”、“smokeid”、“地址行1”）（我不确定这个函数会做什么，只是粘贴一下，让大家知道我到底在找什么。）读取设置为API类/方法的值后，地图可以显示街道视图将其显

我正在尝试将Google maps V3 API集成到我们的网站中。我需要读取地址并将其设置为地图API，以便地图将显示该地址的街道视图

所以我需要三点帮助

如何读取地址值

示例：

var streetAddressArray=getElementsByAttribute（parent.document.forms[0]、“*”、“smokeid”、“地址行1”）（我不确定这个函数会做什么，只是粘贴一下，让大家知道我到底在找什么。）


读取设置为API类/方法的值后，地图可以显示街道视图

将其显示为街景

这与我正在寻找的类似：




我非常感谢你的回复，苏维！
这是我的节目：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">      html { height: 100% }      body { height: 100%; margin: 0; padding: 0 }      #map_canvas { height: 100% }    </style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=KEY_VALUE &sensor=true">
</script>    
<script type="text/javascript">     
  function initialize() {  
    
   var fenway = new google.maps.LatLng(42.345573,-71.098326);
   var mapOptions = {
     center: fenway,
     zoom: 14,
     mapTypeId: google.maps.MapTypeId.ROADMAP
   };
   var map = new google.maps.Map(
   document.getElementById("map_canvas"), mapOptions);
   var panoramaOptions = {
      position: fenway,
      pov: {
        heading: 34,
        pitch: 10,
        zoom: 1
      }
    };
    var panorama = new  google.maps.StreetViewPanorama(document.getElementById("pano"),panoramaOptions);
   map.setStreetView(panorama);
                
  }    
</script> 
</head>  
<body onload="initialize()"> 
<div id="map_canvas" style="width:100%; height:100%">
<div id="pano" style="position:absolute; left:410px; top: 8px; width: 400px; height: 300px;"></div>
</div>
</body>
</html>


我想我离目标有点近，但是我的这个例子不起作用，它没有呈现任何东西
<!DOCTYPE html><html>  <head>    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />    <style type="text/css">      html { height: 100% }      body { height: 100%; margin: 0; padding: 0 }      #map_canvas { height: 100% }    </style>    <script type="text/javascript"    
  src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBweQln0Jf5uBWvkTGSkv8AfkBdt-zZ3dE&sensor=true">    </script>    
<script type="text/javascript">     
  
  <!-- -->
  
  var geocoder;  
  var map;
  function initialize() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {      zoom: 8,      center: latlng,      mapTypeId: google.maps.MapTypeId.ROADMAP    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    } 
  function codeAddress() {
    var address = document.getElementById("address").value;
    geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        map.setCenter(results[0].geometry.location);
        var marker = new google.maps.Marker({ map: map, position: results[0].geometry.location});
       } 
        else 
       {
        alert("Geocode was not successful for the following reason: " + status);
       }   
      });
     }
 <body onload="initialize()">
 <div id="map_canvas" style="width: 320px; height: 480px;">
 </div>  
<div> 
   <input id="address" type="textbox" value="Sydney, NSW">
   <input type="button" value="Encode" onclick="codeAddress()">
</div>
</body>
  <!-- -->
</html>

html{height:100%}body{height:100%；margin:0；padding:0}map#u canvas{height:100%}
var地理编码器；
var映射；
函数初始化（）{
geocoder=新的google.maps.geocoder（）；
var latlng=新的google.maps.latlng（-34.397150.644）；
var myOptions={zoom:8，center:latlng，mapTypeId:google.maps.mapTypeId.ROADMAP}
map=new google.maps.map（document.getElementById（“map_canvas”），myOptions）；
} 
函数代码地址（）{
var address=document.getElementById（“地址”）.value；
geocoder.geocode（{'address'：address}，函数（结果，状态）{
if（status==google.maps.GeocoderStatus.OK）{
map.setCenter（结果[0].geometry.location）；
var marker=new google.maps.marker（{map:map，position:results[0].geometry.location}）；
} 
其他的
{
警报（“地理编码因以下原因未成功：“+状态”）；
}   
});
}

您能告诉我哪里出了问题吗？
您需要首先初始化街景（代替地图或绑定到地图），请参阅街景文档以进行设置(https://developers.google.com/maps/documentation/javascript/streetview). 然后，您需要使用谷歌的地理编码服务来查找地址。本文件(https://developers.google.com/maps/documentation/javascript/geocoding)将帮助您设置一个简单的地址搜索，但您必须稍微调整它，以便它在街景地图上呈现搜索。基本上你必须改变：
geocoder.geocode( { 'address': address}, function(results, status) {
 if (status == google.maps.GeocoderStatus.OK) {
  map.setCenter(results[0].geometry.location);
 }

您需要将位置设置为panorama.setPosition，而不是map.setCenter（结果[0].geometry.location）
请记住，街景的视角可能并不总是指向你想要的建筑，我认为谷歌没有办法确切地告诉你要搜索的建筑/位置将位于街道的哪一边
希望能有所帮助。
回答您的两个问题：
不知何故，我无法查看全景视图。我的代码有问题吗
之所以会发生这种情况，是因为地图画布的关闭也包围了全景。它应该直接位于map_画布的div之后，如下所示：
<body onload="initialize()"> 
<div id="map_canvas" style="width:100%; height:100%"></div>
<div id="pano" style="position:absolute; left:410px; top: 8px; width: 400px; height: 300px;"></div> 
</body>



另外，确保在包含google maps API脚本标记的标题中包含API密钥

关于你的第二个问题，你可以用多种方式来做。最简单的方法是使用输入文本字段，并使用jquery的.val（）函数获取文本字段中的值。然后将值传递给地理编码器以执行搜索
有用资源：


<body onload="initialize()"> 
<div id="map_canvas" style="width:100%; height:100%"></div>
<div id="pano" style="position:absolute; left:410px; top: 8px; width: 400px; height: 300px;"></div> 
</body>