Javascript 谷歌地图API v3：控制街景的方向，并使用地址而不是lat/lon_Javascript_Google Maps Api 3_Google Street View

Javascript 谷歌地图API v3：控制街景的方向，并使用地址而不是lat/lon

javascript google-maps-api-3

Javascript 谷歌地图API v3：控制街景的方向，并使用地址而不是lat/lon,javascript,google-maps-api-3,google-street-view,Javascript,Google Maps Api 3,Google Street View,我正在学习谷歌地图API v3。我能把这些代码组合起来。我试着让它尽可能简单。它是有效的我遇到的问题是街景地图没有指向正确的方向/地址。右边的建筑是拐角处的黄色建筑（您需要将街景向左滚动几次）当我在中使用相同的跳线时，它指向正确的建筑/地址。我的地图的街景指向对面/建筑物有没有办法控制街景地图在给定跳线内所指向的方向-北/南/西……等等另外，是否可以只使用地址，并让google api计算latLong？-为300多个地址和越来越多的地址计算并找到正确的坐标是没有效率的>\u地址：加

我正在学习谷歌地图API v3。我能把这些代码组合起来。我试着让它尽可能简单。它是有效的

我遇到的问题是街景地图没有指向正确的方向/地址。右边的建筑是拐角处的黄色建筑（您需要将街景向左滚动几次）

当我在中使用相同的跳线时，它指向正确的建筑/地址。我的地图的街景指向对面/建筑物

有没有办法控制街景地图在给定跳线内所指向的方向-北/南/西……等等
另外，是否可以只使用地址，并让google api计算latLong？-为300多个地址和越来越多的地址计算并找到正确的坐标是没有效率的>\u地址：加利福尼亚州洛杉矶市西29街1256号，邮编90007'，图标：{ 红色：'http://labs.google.com/ridefinder/images/mm_20_red.png', 蓝色：'http://maps.google.com/mapfiles/ms/micons/blue-dot.png', 影子：'http://maps.google.com/mapfiles/ms/micons/msmarker.shadow.png' } }; //*******************************职能************************ 函数bindInfoWindow（标记、地图、infoWindow、html）{ google.maps.event.addListener（标记'click'，函数（）{ setContent（html）；信息窗口。打开（地图、标记）； //marker.openInfoWindowHtml（html）； infoWindow.getContent（）；marker.openInfoWindowTabsHtml（infoTabs）； }); } 函数googleMaps（） { var map=new google.maps.map（document.getElementById（“map”），{ 中心：新的google.maps.LatLng（options.lat，options.lon），缩放：选项。缩放， mapTypeId:options.type }); var marker=new google.maps.marker({ 地图：地图，位置：map.getCenter（），标题：options.title，图标：options.icons.blue，阴影：options.icons.shadow }); bindInfoWindow（marker、map、infoWindow、options.html）； map.StreetView=新建google.maps.StreetViewPanorama（document.getElementById（“map_StreetView”）{ 位置：map.getCenter（），缩放：1 }); //map.setStreetView（map.StreetView）；//此行将街道视图图标添加到路线图中，并将其与街道视图绑定在一起 }//加载结束（） //**********************************负载************************ //加载文档后调用googleMaps google.maps.event.addDomListener（窗口'load'，函数（）{ 谷歌地图（）； //您可以在此处添加更多代码 }); //]]> HTML:
```
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title><?php echo $map['address']?></title>

    
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="http://www.mydomain.com/_api/google/maps/v3/street_view.js"></script>
    
</head>


<body>
    <div id="map-container" >
        <div id="map_StreetView" style="width: 350px; height: 250px"></div><br/>
        <div id="map" style="width: 350px; height: 250px"></div>
    </div>
</body>
</html>
```
另外，我试着给你一个JSFIDLE，但不管出于什么原因，它没有显示地图
首先，初始化StreetViewPanorama时，相机位置设置为
```
map.StreetView = new google.maps.StreetViewPanorama
  (document.getElementById("map_StreetView"), {
    position: map.getCenter(),
    pov: { heading: 135, pitch: 0, zoom: 1 }
});
```
更新的JS小提琴：
有关更多信息，请阅读StreetView上的文档

关于第二个问题，地理编码是您需要的。（不幸的是，不存在“简单”的方法，即在API中使用地址的一行方法）。如果重复查询同一个位置，最好只查询一次并保存最后一次。请看这里：

这个答案说明了如何将地址转换为LatLng，实际上它是一个数组，但每个地址都是逐个转换的
```
函数代码地址（地址，回调）{
geocoder.geocode（{'address'：address}，函数（结果，状态）{
if（status==google.maps.GeocoderStatus.OK）{
回调（结果[0].geometry.location）；
} 
});
}
函数初始化（）{
代码地址（“芝加哥，伊利诺伊州”，函数（默认位置）{
var map=new google.maps.map（document.getElementById（“map_canvas”），
{中心：默认的_位置，
zoom:3，mapTypeId:google.maps.mapTypeId.ROADMAP}）；
地点=[“洛杉矶”、“戴维斯”、“真相或后果”，
“安阿伯”、“马萨诸塞州”]；
对于（变量i=0；i
```
我修复了您的JSFIDLE，删除了和标记。现在让我看看我是否真的能帮你解决这个问题@lilina Great！这个地址属于黄色大楼；在我阅读有关摄像头位置的文档之前，角落里的那个（你需要将街景向左滚动几次）我是否需要为每个地址设置摄像头位置？好问题，我想答案是肯定的，不同位置的不同设置：（否则脚本怎么知道你想指向黄色的建筑物而不是车库门？LatLngs没有这些信息。@liliana我想这就是答案。我想我必须在mysql的映射表中添加一些字段。是的，我从另一个答案复制的内容更像是一个黑客。我更改了其中一个变量，
streetViewMaxDistance，它在您给我的两种LatLngs中都能工作。但我真的不再信任此解决方案。我找到了该函数的文档。它说小于50的值将返回最接近的值，因此将最大距离保留在30应该是理想的
```
map.StreetView = new google.maps.StreetViewPanorama
  (document.getElementById("map_StreetView"), {
    position: map.getCenter(),
    pov: { heading: 135, pitch: 0, zoom: 1 }
});
```
```
  function codeAddress(address, callback) {
    geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        callback(results[0].geometry.location);
      } 
    });
  }

  function initialize() {
    codeAddress("Chicago, IL", function(default_location) {
      var map = new google.maps.Map(document.getElementById("map_canvas"),
        { center: default_location,
        zoom: 3, mapTypeId: google.maps.MapTypeId.ROADMAP });

      locations = ["Los Angeles", "Davis", "Truth or Consequences",
        "Ann Arbor", "Massachusetts"];

      for (var i = 0; i < locations.length; i++) {
        codeAddress(locations[i], function(latLng) {
          new google.maps.Marker({map:map, position:latLng});
        });
      }
    });
  }
```