谷歌地圖API - 通過地址添加標記javascript

我有地址的地方數據庫，我想在谷歌地圖上添加標記。谷歌地圖API - 通過地址添加標記javascript

它只顯示默認標記，看起來像geocoder.geocode（）什麼也不做。舉個例子，我試圖在「紐約市」添加一個標記，但沒有成功。

<script> 
    var geocoder; 
    var map; 
    var address = "new york city"; 
    geocoder = new google.maps.Geocoder(); 
    function initMap() { 
     var uluru = { lat: -25.363, lng: 131.044 }; 
     var map = new google.maps.Map(document.getElementById('map'), { 
      zoom: 4, 
      center: uluru 
     }); 
     var marker = new google.maps.Marker({ 
      position: uluru, 
      map: map 
     }); 
     codeAddress(address); 

    } 

    function codeAddress(address) { 

     geocoder.geocode({ 'address': address }, function (results, status) { 
      if (status == 'OK') { 
        var marker = new google.maps.Marker({ 
        position: address, 
        map: map 
       }); 
      } else { 
       alert('Geocode was not successful for the following reason: ' + status); 
      } 
     }); 
    } 


</script> 
<script src="https://maps.googleapis.com/maps/api/js?key=XXX&callback=initMap" 
    async defer></script>

來源

2017-10-21 Aviv Eyal

您沒有得到預期結果的原因是因爲您提供的示例中存在不正確的代碼位置。在Google地圖完全加載之前，您正嘗試獲取Google Maps API Geocoder的新實例。因此，谷歌地圖API地理編碼器將不會工作，因爲這未捕獲的ReferenceError：谷歌未定義。您應該在initMap（）函數內部獲得Google Maps API Geocoder的新實例。

你可以檢查Maps JavaScript API Geocoding 瞭解更多。

您還可以檢查Best Practices When Geocoding Addresses。

另請注意，發佈Google Maps APi相關問題時，不應包含您的API_KEY。

這裏是整個代碼：

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Geocoding service</title> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <meta charset="utf-8"> 
    <style> 
     /* Always set the map height explicitly to define the size of the div 
     * element that contains the map. */ 
     #map { 
     height: 100%; 
     } 
     /* Optional: Makes the sample page fill the window. */ 
     html, body { 
     height: 100%; 
     margin: 0; 
     padding: 0; 
     } 
    </style> 
    </head> 
    <body> 
    <div id="map"></div> 
    <script> 
     var geocoder; 
     var map; 
     var address = "new york city"; 
     function initMap() { 
     var map = new google.maps.Map(document.getElementById('map'), { 
      zoom: 8, 
      center: {lat: -34.397, lng: 150.644} 
     }); 
     geocoder = new google.maps.Geocoder(); 
     codeAddress(geocoder, map); 
     } 

     function codeAddress(geocoder, map) { 
     geocoder.geocode({'address': address}, function(results, status) { 
      if (status === '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); 
      } 
     }); 
     } 
    </script> 
    <script async defer 
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"> 
    </script> 
    </body> 
</html>

現場演示here。

希望它有幫助！

來源

2017-10-24 08:56:09 rafon

太好了 - 你介意接受/提升我的回答嗎？謝謝 – rafon

當然，我已經投票了，但只有當我有更多的聲望點時纔會發生。 –

我剛剛提出了你的問題 - 奇怪，因爲我認爲你已經> 15代表:)。接受它並不需要更高的代表:) – rafon

你的代碼有幾個錯誤。通常情況下，它應該現在看起來OK：

var geocoder; 
var map; 
var address = "new york city"; 

function initMap() { 
    geocoder = new google.maps.Geocoder(); 

    var uluru = { lat: -25.363, lng: 131.044 }; 
    map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 4, 
     center: uluru 
    }); 
    var marker = new google.maps.Marker({ 
     position: uluru, 
     map: map 
    }); 
    codeAddress(address); 

} 

function codeAddress(address) { 

    geocoder.geocode({ 'address': address }, function (results, status) { 
     console.log(results); 
     var latLng = {lat: results[0].geometry.location.lat(), lng: results[0].geometry.location.lng()}; 
     console.log (latLng); 
     if (status == 'OK') { 
      var marker = new google.maps.Marker({ 
       position: latLng, 
       map: map 
      }); 
      console.log (map); 
     } else { 
      alert('Geocode was not successful for the following reason: ' + status); 
     } 
    }); 
}

這是你的錯誤列表：

你必須初始化地理編碼時，谷歌地圖API是滿載。這意味着您必須在initMap()中放入以下代碼行：geocoder = new google.maps.Geocoder();。
初始化地圖時，必須引用全局變量。在你的代碼中，你在你的函數中創建一個新的變量映射。但是，你必須通過全球變量映射。
何時，您想要獲取地理編碼器結果的位置，您必須通過以下代碼行：results[0].geometry.location.lat()。

您可以參考documentation。

如果您有任何疑問，請告訴我。

來源

2017-10-22 11:30:45