2

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

所以我需要3点帮助。

  1. 如何读取地址值。

    示例:(var streetAddressArray = getElementsByAttribute(parent.document.forms[0], "*", "smokeid", "Address Line 1");我不确定此功能会做什么,只是粘贴以了解我到底在寻找什么。)

  2. 读取设置为 API 类/方法的值后,地图可以显示街景。

  3. 将其显示为街景。

这类似于我正在寻找的内容:


我非常感谢您的回复苏维!这是我的程序:

<!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. 不知何故,我无法查看全景视图。我的代码有问题吗?
  2. 地图地址应来自一堆输入字段(地址行 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>

你能帮我出什么问题吗?

4

2 回答 2

1

您的2个问题的答案:

  1. 不知何故,我无法查看全景视图。我的代码有问题吗?

发生这种情况是因为关闭</div>map_canvas 也包含了全景。它应该直接出现在 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/

于 2012-06-01T16:10:09.317 回答
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);
 }

您需要将位置设置为panorama.setPosition(results[0].geometry.location); 而不是map.setCenter。

请记住,街景的视角可能并不总是指向您想要的建筑物,我认为 Google 无法准确判断您正在搜索的建筑物/位置将在街道的哪一侧是。

希望有帮助。

于 2012-05-27T14:40:45.967 回答