Question

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

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

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

Answer 2

使用您的示例，但删除前两个参数（lat，lon）并将其替换为地址，然后使用the google "simple geocoder" example中经过修改的codeAddress：

代码段

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

如何使用Google地图地理编码的地址而不使用lon和lat

2 个答案: