試圖地址轉換爲緯度和長顯示街景：事業部是灰色的

Question

我用代碼this Stack Overflow Thread，非常感謝你。我使用Google Javascript Maps API下的Streetview代碼。但是，我沒有得到任何回報。警報（緯度）工作和警報（經度）工作。但是，當我嘗試顯示街景時，會顯示「Uncaught ReferenceError：未定義緯度」。我嘗試將警報中返回的值粘貼到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

顯然沒有街景數據在40.712784，-74.005941（地理編碼「紐約」的結果）。如果我將它改爲「時代廣場，紐約」（並將全景圖創建到地理編碼器回調函數中），我會得到一幅全景圖（在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>

Answer 2

試試這個。我沒有經過測試就寫了它，但它應該給你一個起點。

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