如何在谷歌地圖中使用地址而不是經度和緯度？

我有這個腳本正在工作。我可以拖動標記，並使用經度和緯度填充兩個文本輸入字段。我有變量「地址」，其中包含州和縣。我應該如何改變我的代碼，使其不再使用地址變量而是使用靜態的經度和緯度變量。所以最初我想讓地圖位於地址位置的中間。如何在谷歌地圖中使用地址而不是經度和緯度？

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>

來源

2014-03-03 Jake H.

結帳這個代碼here，它使用 '聖迭戈，CA' 啓動地圖。

<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

正是你需要做的是，使用地理編碼爲「文本地址」轉換成相應的緯度和經度，然後使用這些值來養活谷歌地圖API什麼。

您可以映射文檔https://developers.google.com/maps/documentation/javascript/geocoding#GeocodingRequests

和示例代碼從文檔

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

來源

2014-03-03 04:00:16 Gaurav

酷閱讀更多關於谷歌地理編碼！我得到它的工作，仍然能夠拖動標記和填充文本輸入的經度和緯度。謝啦！ –

很高興它有幫助。 – Gaurav

複製（[代替經度和緯度與谷歌地圖API使用地址] http://stackoverflow.com/questions/15925980/using-address-instead-of-longitude-and-latitude-with-google-maps-api ） – geocodezip

如何在谷歌地圖中使用地址而不是經度和緯度？

回答

相關問題