Question

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

所以我需要帮助3分。

如何阅读地址值。

示例：var streetAddressArray = getElementsByAttribute(parent.document.forms[0], "*", "smokeid", "Address Line 1");（我不确定这个函数会做什么，只是粘贴以了解我究竟在寻找什么。）
读取设置为API类/方法的值后，以便地图可以显示街景。
将其显示为街景。

这与我正在寻找的相似：

https://google-developers.appspot.com/maps/documentation/javascript/examples/streetview-simple

我非常感谢你对Suvi的回应！这是我的计划：

<!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>

我面临两个问题，

不知何故，我无法查看全景视图。我的代码有什么问题吗？
地图的地址应来自束输入字段（地址行1和城市和邮编等）。如何将输入字段地址分配给地图，以便地图直接显示该特定位置？

我正在使用自定义产品。我有另一个例子，他们正在使用：

var streetAddressArray = getElementsByAttribute(parent.document.forms[0], "*", "smokeid", "LossLocation_Address1");

我想我离目标越来越近了但是我的这个例子没有用，它没有渲染任何东西。

<!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>

你能帮我解决问题吗？

Answer 1

您需要先初始化StreetView（代替或绑定到地图），请参阅StreetView文档进行设置（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);
 }

而不是map.setCenter，您需要将位置设置为panorama.setPosition（results [0] .geometry.location）;

请记住，街景的观点可能并不总是指向你想要的建筑物，我不认为谷歌有办法确切地告诉你街道的哪一侧你所在的建筑/位置寻找将是。

希望有所帮助。

Answer 2

解决您的2个问题：

不知何故，我无法查看全景视图。我的代码有什么问题吗？

这种情况正在发生，因为map_canvas的结束</div>也包含了全景。它应该直接位于map_canvas的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（）函数来获取文本字段中的值。然后将值传递给地理编码器以执行搜索。

有用的资源：

https://developers.google.com/maps/documentation/javascript/geocoding

http://api.jquery.com/val/

Google MAP API V3 - 街景视图

2 个答案: