尝试将地址转换为经纬度并显示街景：Div 显示为灰色

Question

我使用了this Stack Overflow Thread的代码，非常感谢。我在下面使用了 Google Javascript 地图 API 中的街景代码。但是，我什么也没得到。 alert(latitude) 有效， alert(longitude) 有效。但是在下面，当我尝试显示街景时，它显示 "Uncaught ReferenceError: latitude is not defined"。我尝试将警报中返回的值粘贴到 StreetView 代码中，然后 DIV 变成灰色。难倒我了。

   <div id="map" style="border-width:medium;border-style:solid; border-color:Red;width:200px;height:150px;"></div>


   <script type="text/javascript">

   function initMap(){

       var geocoder = new google.maps.Geocoder();
       var address = "new york";

       geocoder.geocode({ 'address': address }, function (results, status) {

           if (status == google.maps.GeocoderStatus.OK) {
               var latitude = results[0].geometry.location.lat();
               var longitude = results[0].geometry.location.lng();
               alert(latitude);
               alert(longitude);
           }
       }); 

       var panorama;          
      panorama = new google.maps.StreetViewPanorama(
      document.getElementById('map'),
      {
          position: { lat: latitude, lng: longitude },
          pov: { heading: 165, pitch: 0 },
          zoom: 1
      });
 }


</script>

Answer 1

试试这个。我没有经过测试就写了它，但它应该给你一个起点。

<div id="map" style="border-width:medium;border-style:solid; border-color:Red;width:200px;height:150px;"></div>


<script type="text/javascript">

    function initMap() {

        var geocoder = new google.maps.Geocoder(),
            address = "new york",
            // this function will get called inside geocode's callback
            // when we have received the async data
            renderStreetView = function(lat, lng) {
                var panorama,
                    map = document.getElementById('map');

                panorama = new google.maps.StreetViewPanorama(map, {
                    position: { lat: lat, lng: lng },
                    pov: { heading: 165, pitch: 0 },
                    zoom: 1
                });
            };

        geocoder.geocode({ 'address': address }, function (results, status) {

            if (status == google.maps.GeocoderStatus.OK) {
                var latitude = results[0].geometry.location.lat(),
                    longitude = results[0].geometry.location.lng();

                alert(latitude);
                alert(longitude);

                renderStreetView(latitude, longitude);
            }
        }); 
    }

</script>

Answer 2

显然在 40.712784,-74.005941 处没有街景数据（地理编码的结果 "new york"）。如果我将其更改为 "times square, new york"（并将全景图的创建放入地理编码器回调函数中），我将获得全景图（位于 40.759011，-73.984472）。

working fiddle

代码片段：

function initMap() {

  var geocoder = new google.maps.Geocoder();
  var address = "times square, new york"; // "new york"; // 

  geocoder.geocode({
    'address': address
  }, function(results, status) {

    if (status == google.maps.GeocoderStatus.OK) {
      document.getElementById('coord').innerHTML += results[0].geometry.location.toUrlValue(6) + "</br>";
      var panorama;
      panorama = new google.maps.StreetViewPanorama(
        document.getElementById('map'), {
          position: results[0].geometry.location,
          pov: {
            heading: 165,
            pitch: 0
          },
          zoom: 1,
          visible: true
        });
    }
  });
}
google.maps.event.addDomListener(window, 'load', initMap);

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="coord"></div>
<div id="map" style="border-width:medium;border-style:solid; border-color:Red;width:400px;height:300px;"></div>

尝试将地址转换为经纬度并显示街景：Div 显示为灰色

Trying to convert Address to Lat Long and display Street View: Div is greyed out

javascript

google-maps

geocoding

google-geocoder