的Javascript谷歌地圖API輸入地址顯示位置

我的應用程序目前尋找最近的滑雪區的基礎上，即在硬編碼的經度和緯度。我希望能夠在輸入地址，並轉換該地址爲緯度和搜索的經度。我正在使用Google Maps API和地方圖書館。我知道我不知何故需要使用地理編碼，但不知道如何做到這一點。下面是代碼：的Javascript谷歌地圖API輸入地址顯示位置

<!DOCTYPE html> 
    <html> 
    <head> 
    <meta charset="utf-8"> 
    <title>ski finder</title> 
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true&libraries=places"></script> 

    <style> 
     #map { 
     height: 400px; 
     width: 600px; 
     border: 1px solid #333; 
     margin-top: 0.6em; 
     } 
    </style> 

    <script> 
     var map; 
     var infowindow; 

     function initialize() { 
     var loca = new google.maps.LatLng(41.7475, -74.0872); 

     map = new google.maps.Map(document.getElementById('map'), { 
      mapTypeId: google.maps.MapTypeId.ROADMAP, 
      center: loca, 
      zoom: 8 
     }); 

     var request = { 
      location: loca, 
      radius: 50000, 
      name: 'ski', 
      keyword: 'mountain', 
      type: ['park'] 


     }; 
     infowindow = new google.maps.InfoWindow(); 
     var service = new google.maps.places.PlacesService(map); 
     service.nearbySearch(request, callback); 
     } 

     function callback(results, status) { 
     if (status == google.maps.places.PlacesServiceStatus.OK) { 
      for (var i = 0; i < results.length; i++) { 
      createMarker(results[i]); 
      } 
     } 
     } 

     function createMarker(place) { 
     var placeLoc = place.geometry.location; 
     var marker = new google.maps.Marker({ 
      map: map, 
      position: place.geometry.location 
     }); 

     google.maps.event.addListener(marker, 'mouseover', function() { 
      infowindow.setContent(place.name); 
      infowindow.open(map, this); 
     }); 
     } 

     google.maps.event.addDomListener(window, 'load', initialize); 
    </script> 
     </head> 
     <body> 
     <h1> Welcome to Ski Finder </h1> 
     <p> Please enter you location below, and we will find your local ski areas. </p> 
     <form> 
     <label for="zip">Zip Code: </label> 
     <input type = "text" name="zip" placeholder = "12345" autofocus> 
    </form> 
     <div id="map"></div> 
     <div id="text"> 

     </body> 
    </html>

而且我嘗試使用谷歌地圖的開發者頁面上的例子，無法得到它的工作。謝謝先進。

來源

2013-04-17 Jmamz06

看看Geocoding API，也可能有代碼示例。的[嘗試使用谷歌API V3從地址獲取位置] – Halcyon

可能重複（http://stackoverflow.com/questions/10289346/trying-to-get-location-from-address-using-google-api-v3） – duncan

使用地理編碼器來設置的地方通過位置搜索：

working example

代碼片段：

var geocoder; 
 
var map; 
 
var infowindow; 
 

 
function initialize() { 
 
    geocoder = new google.maps.Geocoder(); 
 
    var loca = new google.maps.LatLng(41.7475, -74.0872); 
 

 
    map = new google.maps.Map(document.getElementById('map'), { 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
 
    center: loca, 
 
    zoom: 8 
 
    }); 
 

 
} 
 

 
function callback(results, status) { 
 
    if (status == google.maps.places.PlacesServiceStatus.OK) { 
 
    for (var i = 0; i < results.length; i++) { 
 
     createMarker(results[i]); 
 
    } 
 
    } 
 
} 
 

 
function createMarker(place) { 
 
    var placeLoc = place.geometry.location; 
 
    var marker = new google.maps.Marker({ 
 
    map: map, 
 
    position: place.geometry.location 
 
    }); 
 

 
    google.maps.event.addListener(marker, 'mouseover', function() { 
 
    infowindow.setContent(place.name); 
 
    infowindow.open(map, this); 
 
    }); 
 
} 
 

 
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 
 
     }); 
 
     var request = { 
 
     location: results[0].geometry.location, 
 
     radius: 50000, 
 
     name: 'ski', 
 
     keyword: 'mountain', 
 
     type: ['park'] 
 
     }; 
 
     infowindow = new google.maps.InfoWindow(); 
 
     var service = new google.maps.places.PlacesService(map); 
 
     service.nearbySearch(request, callback); 
 
    } else { 
 
     alert("Geocode was not successful for the following reason: " + status); 
 
    } 
 
    }); 
 
} 
 

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

#map { 
 
    height: 400px; 
 
    width: 600px; 
 
    border: 1px solid #333; 
 
    margin-top: 0.6em; 
 
}

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true&libraries=places"></script> 
 
<title>ski finder</title> 
 

 
<h1> Welcome to Ski Finder </h1> 
 
<p>Please enter you location below, and we will find your local ski areas.</p> 
 
<form> 
 
    <label for="zip">Zip Code:</label> 
 
    <input type="text" id="address" placeholder="12345" autofocus></input> 
 
    <input type="button" value="Submit" onclick="codeAddress();"></input> 
 
</form> 
 
<div id="map"></div> 
 
<div id="text">

來源

2013-04-18 03:36:51 geocodezip

以郵政編碼作爲輸入顯示谷歌地圖。 – Ganesha

<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en" xml:lang="en"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>PC Pro - Google Maps Advanced Example</title> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 
     var map = null; 
     $(document).ready(function() { 
      // Set values for latitude and longitude 
      var latitude = parseFloat("51.515252"); 
      var longitude = parseFloat("-0.189852"); 
      // Setup the Google map 
      loadMap(latitude, longitude); 
      // Add the marker 
      setupMarker(latitude, longitude); 
      // Setup the address lookup on the button click event 
      $('#lookup').click(function() { 
       var address = $('#address').val(); 
       var geocoder = new google.maps.Geocoder();   
       geocoder.geocode({ 'address': address }, function (results, status) { 
        if (status == google.maps.GeocoderStatus.OK) { 
         // Show the new position on the map 
         setupMarker(results[0].geometry.location.lat(), results[0].geometry.location.lng()) 
        } 
        else alert("Unable to get a result, reason: " + status); 
       }); 
      }); 
     }); 
     // Loads the maps 
     loadMap = function (latitude, longitude) { 
      var latlng = new google.maps.LatLng(latitude, longitude); 
      var myOptions = { 
       zoom: 7, 
       center: latlng, 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      }; 
      map = new google.maps.Map(document.getElementById("map"), myOptions); 
     } 
     // Setups a marker and info window on the map at the latitude and longitude specified 
     setupMarker = function(latitude, longitude) { 
      // Generate the position from the given latitude and longitude values 
      var pos = new google.maps.LatLng(latitude, longitude); 
      // Define the marker on the map in the specified location 
      var marker = new google.maps.Marker({ 
       position: pos, 
       map: map, 
       title: name 
      }); 
      // Add a listener to this marker to display the information window on click 
      var info = "This is a marker for the following co-ordinates:<br />latitude: " + latitude + "<br/>longitude: " + longitude; 
      google.maps.event.addListener(marker, 'click', function() { 
       var infowindow = new google.maps.InfoWindow({ 
        content: info 
       }); 
       infowindow.open(map, marker); 
      }); 
     } 
</script> 
</head> 
<body> 
<label for="address">Address:</label> 
<input id="address" type="text" style="width:540px" /> 
<input id="lookup" type="button" value="Lookup" /> 
<div id="map" style="width:600px;height:600px;margin-top:10px;"></div> 
</body> 
</html>

來源

2014-02-21 06:55:50 Ganesha

以地址，郵政編碼爲輸入顯示谷歌地圖。 – Ganesha

的Javascript谷歌地圖API輸入地址顯示位置

回答

相關問題