javascript 如何将纬度经度从 HTML 表单传递到谷歌地图
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28814892/
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
How to pass Latitude Longitude from HTML form to Google Maps
提问by Muhammad Sohaib Roomi
I want to pass latitude and longitude from user. How I can pass parameters from html form to google map API? How to learn complete google map API step by step which start to end. and how to add more then one lat and lng to one map?
我想从用户那里传递纬度和经度。如何将参数从 html 表单传递到谷歌地图 API？如何从头到尾逐步学习完整的谷歌地图 API。以及如何在一张地图上添加超过一个纬度和纬度？
<!DOCTYPE html>
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js">
</script>
<script>
var lat=51.508742;
var lng=8.120850;
var myCenter=new google.maps.LatLng(lat,lng);
function initialize()
{
var mapProp = {
center:myCenter,
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
var marker=new google.maps.Marker({
position:myCenter,
});
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<form id="form1">
<table>
<tr>
<td>Enter Latitude:</td>
<td>
<input type="text" name="lat" value="13.053147716796578" />
</td>
</tr>
<tr>
<td>Enter Longitude:</td>
<td>
<input type="text" name="lng" value="80.2501953125" />
</td>
</tr>
<tr>
<td></td>
<td>
<input type="button" value="Submit" />
</td>
</tr>
</table>
<div id="googleMap" style="width:500px;height:380px;"></div>
</form>
</body>
</html>
回答by MrUpsidown
- Use a google.maps.event.addDomListenerto listen to the form submit event.
- Give your lat and lng input fields an ID so that you can identify them.
- Create a marker from the form values (and/or center the map on the location).
- 使用google.maps.event.addDomListener监听表单提交事件。
- 为您的 lat 和 lng 输入字段提供一个 ID，以便您可以识别它们。
- 从表单值创建一个标记（和/或在位置上居中地图）。
You also want to validate the user input. You should check that the user entered numbers and that they are valid lat and lng values.
您还想验证用户输入。您应该检查用户输入的数字是否是有效的 lat 和 lng 值。
More information hereon how to validate the latitude value on a mercator projection.
有关如何验证墨卡托投影上的纬度值的更多信息，请点击此处。
Here is a complete and working example to achieve what you want:
这是一个完整且有效的示例来实现您想要的：
HTML
HTML
<form id="mapCenterForm">
Lat: <input type="text" id="lat" />
<br />
Lng: <input type="text" id="lng" />
<br />
<input type="submit" value="Center map" />
</form>
<br />
<div id="map-canvas"></div>
JavaScript
JavaScript
// Calculate maximum latitude value on mercator projection
var maxLat = Math.atan(Math.sinh(Math.PI)) * 180 / Math.PI;
function initialize() {
var center = new google.maps.LatLng(0, 0);
var mapOptions = {
zoom: 3,
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
// DOM event listener for the center map form submit
google.maps.event.addDomListener(document.getElementById('mapCenterForm'), 'submit', function(e) {
e.preventDefault();
// Get lat and lng values from input fields
var lat = document.getElementById('lat').value;
var lng = document.getElementById('lng').value;
// Validate user input as numbers
lat = (!isNumber(lat) ? 0 : lat);
lng = (!isNumber(lng) ? 0 : lng);
// Validate user input as valid lat/lng values
lat = latRange(lat);
lng = lngRange(lng);
// Replace input values
document.getElementById('lat').value = lat;
document.getElementById('lng').value = lng;
// Create LatLng object
var mapCenter = new google.maps.LatLng(lat, lng);
new google.maps.Marker({
position: mapCenter,
title: 'Marker title',
map: map
});
// Center map
map.setCenter(mapCenter);
});
}
function isNumber(n) {
return !isNaN(parseFloat(n)) && isFinite(n);
}
function latRange(n) {
return Math.min(Math.max(parseInt(n), -maxLat), maxLat);
}
function lngRange(n) {
return Math.min(Math.max(parseInt(n), -180), 180);
}
initialize();
Demo
演示
回答by Muhammad Sohaib Roomi
Give the elements IDs, like:
提供元素 ID，例如：
<input type="text" id="lat" name="lat" value="13.053147716796578" />
Just use Javascript to get the values:
只需使用 Javascript 来获取值：
var lat=document.getElementById('lat').value;
var lng=document.getElementById('lng').value;
