javascript 按经纬度形式更新谷歌地图
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16296320/
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
Update Google map by latitude and longitude form
提问by rahul888
So I am building a HTML page, in which i need a Google Map and a simple form which consists of two fields latitude and longitude.
所以我正在构建一个 HTML 页面，其中我需要一个谷歌地图和一个由纬度和经度两个字段组成的简单表单。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 100% }
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA_0qaGwK5ZWdKYXHRlJ-05CI_geHWo6v4&sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"/>
</body>
</html>
So this is the code to embed a map, from what i have to figured that I need to create a form which change the values of this line :
所以这是嵌入地图的代码，从我必须想到我需要创建一个表单来更改此行的值：
center: new google.maps.LatLng(-34.397, 150.644)
and updates it whenever I press the update button or submit button. I know how to create a form but don't know how exactly to use in the above code.
并在我按下更新按钮或提交按钮时更新它。我知道如何创建表单，但不知道如何在上面的代码中使用。
Any help would be appreciated.
任何帮助，将不胜感激。
回答by Anoop Joshi
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
margin: 0;
padding: 0;
height: 100%;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
function pan() {
var panPoint = new google.maps.LatLng(document.getElementById("lat").value, document.getElementById("lng").value);
map.panTo(panPoint)
}
</script>
</head>
<body>
<label>lat</label><input type="text" id="lat" />
<br/>
<label>lng</label><input type="text" id="lng" />
<input type="button" value="updateCenter" onclick="pan()" />
<div id="map-canvas"></div>
</body>
</html>
回答by osmanraifgunes
You can use api documentation of google maps
您可以使用谷歌地图的api文档
https://developers.google.com/maps/documentation/javascript/reference#Map
https://developers.google.com/maps/documentation/javascript/reference#Map
In your condition you should use set map method:
在您的情况下，您应该使用 set map 方法：
<input type="button" onclick="map.setCenter(new google.maps.LatLng(-34.397, 150.644))" value="test"/>
回答by Ogelami
This is an elegant solution, moves the camera to the point.
这是一个优雅的解决方案，将相机移动到点。
var myLatlng = new google.maps.LatLng(lat, lng);
map.panTo(myLatlng);
This jumps directly to the point.
这直接跳到了重点。
var myLatlng = new google.maps.LatLng(lat, lng);
map.setCenter(myLatlng);
回答by Sky's On Ur Head
For anyone who will come later, suppose you want to update your map latitudes and longitudes from an array(like in case you have a list of cities), you can try this:
对于稍后会来的任何人，假设您想从数组更新地图纬度和经度（例如，如果您有城市列表），您可以尝试以下操作：
Globaly declare your variables and array
全局声明您的变量和数组
var latlon;
var map;
var coords = {
'agra': '27.1767, 78.0081',
'noida': '28.5355, 77.3910',
'kanpur':'26.4499, 80.3319',
};
Add a function that will work on your selects on change, so that when you change a city, the map automatically changes.
添加一个功能，该功能将在您选择更改时起作用，以便当您更改城市时，地图会自动更改。
function firemapChange(value)
{
var c = coords[value].split(',');
var latlon = new google.maps.LatLng(c[0], c[1]);
// map = new google.maps.Map(document.getElementById('mapdiv'), {
//center: {lat: position.coords.latitude, lng: position.coords.longitude},
// center: latlon,
// zoom: 13,
// mapTypeId: 'roadmap'
map.panTo(latlon);
}
Why i have commented so many lines? It is because i was accidentally creating a new map object. Since my map also had a search box, the search box disappeared and all its functionality was lost. So, it is better to avoid creating a new map, and create a global variable
finally in your HTML, you do something like this:
为什么我评论了这么多行？这是因为我不小心创建了一个新的地图对象。因为我的地图也有一个搜索框，搜索框消失了，它的所有功能都丢失了。所以，最好避免创建新地图，并创建一个全局变量
最后在你的 HTML 中，你做这样的事情：
<label style="font-size:11px;">City
</label>
</td>
<td>
<select size="auto" style="font-size:11px;" onChange="firemapChange(this.value)">
<option value="select city" id="b1">Select City
</option>
<option value="noida" id="b1">Noida
</option>
<option value="agra" id="b1">Agra
</option>
<option value="kanpur" id="b1">Kanpur
</option>
</td>
</tr>
