Javascript google maps api 输入地址显示位置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16063670/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-10-27 03:07:51 来源:igfitidea点击:
Javascript google maps api enter address show locations
提问by Jmamz06
My application currently finds the nearest ski areas, based on the latitude and longitude that is hardcoded in. I would like to be able to type in an address and convert that address into the latitude and longitude for the search. I am using Google Maps api and the places library. I know that I somehow need to use geocoding but not sure how to do that. Here is the code:
我的应用程序当前根据硬编码的纬度和经度查找最近的滑雪区。我希望能够输入地址并将该地址转换为经纬度以进行搜索。我正在使用 Google Maps 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>
Also I tried using the example on the google maps developer page and could not get it to work. Thanks in advanced.
此外，我尝试使用谷歌地图开发人员页面上的示例，但无法使其正常工作。先谢谢了。
回答by geocodezip
Use the geocoder to set the location passed in to the places search:
使用地理编码器设置传入地点搜索的位置：
code snippet:
代码片段：
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">回答by 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>
