如何将地址与谷歌地图地理编码一起使用，而不是与 lon 和 lat答案

【问题标题】：How to use an address with Google Maps Geocoding and not with lon and lat如何将地址与谷歌地图地理编码一起使用，而不是与 lon 和 lat
【发布时间】：2015-11-26 17:10:58
【问题描述】：

目前我正在尝试了解如何使用 Google 地图地理编码。我已经有一个可以存储地址和经度和纬度的数据库，并且我还让它以经度和纬度输出它..但是..我希望它使用地址而不是使用经度和纬度。所以让我解释一下我想在下面做什么：

在http://www.bartnooijens.nl/school/webapp-eindopdracht/#acti-toe 上，用户可以添加新条目，也可以添加地址。我希望我的 Google 地图能够读取地址并将其放在地图上。现在我已经将 lon 和 lat 静态存储到数据库中以获取标记，但这不是我想要的。

MYSQL：

地址（需要用于谷歌地图）
lon（目前用于静态 lon，但不想使用 lon）
lat（目前用于静态lat，但不想使用lat）

下面是我现在拥有的代码，当我使用经度和纬度时它正在工作。

我也尝试阅读 https://developers.google.com/maps/documentation/geocoding/intro 的内容，但我的编码经验不足以使其正常工作。所以我希望你们能帮助我一点。提前致谢！

<!DOCTYPE html>
<head>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?key=AIzaSyAsh1JAlWZL0SBacR3N94aVzrp4PPGQQeg&sensor=false"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script type="text/javascript">

             function initialize(lat,lon,label,tekst) {

              // Instellen coordinaten uit de paramaters van de aanroep
              var myLatlng = new google.maps.LatLng(lat,lon);

              // Opties voor de kaart, de coordinaten worden het middelpunt
               var myOptions = {
                 zoom: 15,
                 center: myLatlng,
                 mapTypeId: google.maps.MapTypeId.ROADMAP
               }

              // Maak een nieuwe kaart aan met de ingestelde opties
               var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

              // Maak een infowindow met de tekst die via de parameter binnen kwam
               var infowindow = new google.maps.InfoWindow({
                   content: tekst
               });

              // Url van het icon dat op de kaart wordt gezet
               var image = 'images/maps-marker.png';

              // Plaats een marker op de opgegeven coordinaten
               var marker = new google.maps.Marker({
                   position: myLatlng,
                   map: map,
                   title: label,
                   icon: image
               });
              // Voeg een eventhandler toe voor het tonen van de info als iemand op de marker klikt
               google.maps.event.addListener(marker, 'click', function() {
                 infowindow.open(map,marker);
               });
             }

              function loadMap() {
              initialize('51.584294','4.795296','','');
              }
        </script>


</head>

<body  onload="loadMap()";>
    <div id="map_canvas"></div>
</body>
</html>

【问题讨论】：

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

【解决方案1】：

这段代码成功了：

 <div id="map" style="width: 400px; height: 300px;"></div> 

   <script type="text/javascript"> 

   var address = 'London, UK';

   var map = new google.maps.Map(document.getElementById('map'), { 
       mapTypeId: google.maps.MapTypeId.TERRAIN,
       zoom: 6
   });

   var geocoder = new google.maps.Geocoder();

   geocoder.geocode({
      'address': address
   }, 
   function(results, status) {
      if(status == google.maps.GeocoderStatus.OK) {
         new google.maps.Marker({
            position: results[0].geometry.location,
            map: map
         });
         map.setCenter(results[0].geometry.location);
      }
   });

   </script>

【讨论】：

【解决方案2】：

使用您的示例，但删除前两个参数 (lat,lon) 并将它们替换为地址，然后使用来自 the google "simple geocoder" example 的修改后的 codeAddress：

代码 sn-p：

var geocoder = new google.maps.Geocoder();

function initialize(address, label, tekst) {
  geocoder.geocode({
    'address': address
  }, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      var myLatlng = results[0].geometry.location;
      // Opties voor de kaart, de coordinaten worden het middelpunt
      var myOptions = {
        zoom: 15,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };

      // Maak een nieuwe kaart aan met de ingestelde opties
      var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

      // Maak een infowindow met de tekst die via de parameter binnen kwam
      var infowindow = new google.maps.InfoWindow({
        content: tekst
      });

      // Url van het icon dat op de kaart wordt gezet
      var image = 'http://maps.google.com/mapfiles/ms/micons/blue.png';

      // Plaats een marker op de opgegeven coordinaten
      var marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
        title: label,
        icon: image
      });
      // Voeg een eventhandler toe voor het tonen van de info als iemand op de marker klikt
      google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map, marker);
      });

    } else {
      alert("Geocode was not successful for the following reason: " + status);
    }
  });
}

function loadMap() {
  initialize('Hogeschoollaan, 4818 Breda, Netherlands', '', 'Hello World');
}
google.maps.event.addDomListener(window, 'load', loadMap);

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>

【讨论】：