如何在谷歌地图中使用地址而不是经度和纬度？ [复制]答案

【问题标题】：How do I use Address rather than Longitude and Latitude in google maps? [duplicate]如何在谷歌地图中使用地址而不是经度和纬度？ [复制]
【发布时间】：2014-04-04 00:11:44
【问题描述】：

我有这个正在运行的脚本。我可以拖动标记，它将用经度和纬度填充两个文本输入字段。我有一个包含州和县的变量“地址”。我应该如何更改我的代码以使其脱离地址变量而不是静态纬度和经度变量。所以最初我希望地图位于地址位置的中间。

function selectState(state_id){
if(state_id!="-1"){
loadData('city',state_id);
var e = document.getElementById("state");
var stateloc = e.options[e.selectedIndex].value;

var address = state_id + stateloc;

 var $latitude = document.getElementById('latitude');
 var $longitude = document.getElementById('longitude');
 var latitude = 35.00636021320537
 var longitude = -53.46687316894531;
 var zoom = 12;

var LatLng = new google.maps.LatLng(latitude, longitude);

var mapOptions = {
  zoom: zoom,
  center: LatLng,
  panControl: false,
  zoomControl: true,
  scaleControl: true,
  mapTypeId: google.maps.MapTypeId.ROADMAP
}  

var map = new google.maps.Map(document.getElementById('map'),mapOptions);

var marker = new google.maps.Marker({
  position: LatLng,
  map: map,
  title: 'Drag Me!',
  draggable: true
});

google.maps.event.addListener(marker, 'dragend', function(marker){
  var latLng = marker.latLng;
  $latitude.value = latLng.lat();
  $longitude.value = latLng.lng();
});


      }else{ $("#city_dropdown").html("<option value='-1'>Select city</option>");
}
  }

html

     <li>
              <label for="lat">Latitude:</label>
              <input id="latitude" placeholder="latitude" name="lat" type="text" class="text" />
            </li>
                  <li>
              <label for="lon">Longitude:</label>
              <input id="longitude" placeholder="longitude" name="lon" class="text" type="text"/>
            </li>
   <div id="map" style="width: 460px; height: 350px;"></div>

【问题讨论】：

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

【解决方案1】：

查看此代码here，它使用“加利福尼亚州圣地亚哥”开始地图。

<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Geocoding Simple</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
  var geocoder;
  var map;
  var address ="San Diego, CA";
  function initialize() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
      zoom: 8,
      center: latlng,
    mapTypeControl: true,
    mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
    navigationControl: true,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    if (geocoder) {
      geocoder.geocode( { 'address': address}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
          map.setCenter(results[0].geometry.location);

            var infowindow = new google.maps.InfoWindow(
                { content: '<b>'+address+'</b>',
                  size: new google.maps.Size(150,50)
                });

            var marker = new google.maps.Marker({
                position: results[0].geometry.location,
                map: map, 
                title:address
            }); 
            google.maps.event.addListener(marker, 'click', function() {
                infowindow.open(map,marker);
            });

          } else {
            alert("No results found");
          }
        } else {
          alert("Geocode was not successful for the following reason: " + status);
        }
      });
    }
  }
</script>
</head>
<body style="margin:0px; padding:0px;" onload="initialize()">
 <div id="map_canvas" style="width:100%; height:100%">
</body>
</html>

答案来源：Using Address Instead Of Longitude And Latitude With Google Maps API

正是您需要做的是，使用地理编码将“文本地址”转换为相应的纬度和经度，然后使用这些值提供给 Google Map API。

您可以在地图文档https://developers.google.com/maps/documentation/javascript/geocoding#GeocodingRequests中阅读有关 Google 地理编码的更多信息

以及文档中的示例代码

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Geocoding service</title>
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
      #panel {
        position: absolute;
        top: 5px;
        left: 50%;
        margin-left: -180px;
        z-index: 5;
        background-color: #fff;
        padding: 5px;
        border: 1px solid #999;
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>
var geocoder;
var map;
function initialize() {
  geocoder = new google.maps.Geocoder();
  var latlng = new google.maps.LatLng(-34.397, 150.644);
  var mapOptions = {
    zoom: 8,
    center: latlng
  }
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}

function codeAddress() {
  var address = document.getElementById('address').value;
  geocoder.geocode( { 'address': address}, function(results, status) {
    if (status == google.maps.GeocoderStatus.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);
    }
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body>
    <div id="panel">
      <input id="address" type="textbox" value="Sydney, NSW">
      <input type="button" value="Geocode" onclick="codeAddress()">
    </div>
    <div id="map-canvas"></div>
  </body>
</html>

【讨论】：

酷！我让它工作并且仍然能够拖动标记并用经度和纬度填充文本输入。谢谢大佬！
重复Using Address Instead Of Longitude And Latitude With Google Maps API