谷歌地图 API - 按地址添加标记 javascript答案

【问题标题】：Google maps API - add marker by address javascript谷歌地图 API - 按地址添加标记 javascript
【发布时间】：2018-04-02 18:46:33
【问题描述】：

我有带有地址的地点数据库，我想在谷歌地图上添加标记。

它只显示默认标记，似乎 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>

【问题讨论】：

标签： javascript google-maps google-maps-api-3 geocoding

【解决方案1】：

您没有得到预期结果的原因是您提供的示例中的代码位置不正确。您正在尝试在 Google Maps 完全加载之前获取 Google Maps API Geocoder 的新实例。因此，由于 Uncaught ReferenceError: google is not defined，Google Maps API Geocoder 将无法工作。您应该在 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。

希望对你有帮助！

【讨论】：

【解决方案2】：

您的代码中有几个错误。通常，它现在应该看起来没问题：

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);
        }
    });
}

这是您的错误列表：

您必须在完全加载 google maps api 时初始化您的地理编码。这意味着你必须将这行代码：geocoder = new google.maps.Geocoder();放在initMap ()中。
当您初始化地图时，您必须引用一个全局变量。在您的代码中，您在函数中创建一个新的变量映射。但是，您必须通过全局变量映射。
当你想得到地理编码器结果的位置时，你必须通过这行代码：results[0].geometry.location.lat ()。

您可以参考documentation。

如果您有任何问题，请告诉我。

【讨论】：