更新谷歌地图的经纬度形式

因此，我正在建立一个HTML页面，其中我需要一个Google Map和一个简单的表格，它由两个纬度和经度字段组成。更新谷歌地图的经纬度形式

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

所以这是嵌入地图代码，从我有什么想通，我需要创造出改变这一行的值的形式：

center: new google.maps.LatLng(-34.397, 150.644)

和更新它，每当我按下更新按钮或提交按钮。我知道如何创建表单，但不知道如何在上面的代码中使用。

任何帮助，将不胜感激。

来源

2013-04-30 rahul888

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

来源

2013-04-30 09:46:32

这正是我一直在寻找的感谢。 – rahul888 2013-04-30 09:54:46

欢迎您 – 2013-04-30 09:55:26

您可以使用API文档的谷歌地图

https://developers.google.com/maps/documentation/javascript/reference#Map

在你的情况，你应该使用集映射方法：

<input type="button" onclick="map.setCenter(new google.maps.LatLng(-34.397, 150.644))" value="test"/>

来源

2013-04-30 09:32:38 osmanraifgunes

这是一个很好的解决方案，将摄像机移动到如此地步。

var myLatlng = new google.maps.LatLng(lat, lng); 
map.panTo(myLatlng);

这直接跳到了这一点。

var myLatlng = new google.maps.LatLng(lat, lng); 
map.setCenter(myLatlng);

来源

2013-04-30 09:33:30 Ogelami

如何使用此与窗体伴侣。？ – rahul888 2013-04-30 09:35:38

这是我写的东西，可能会派上用场，或帮助您拿出您的解决方案http://pastie.org/7742029 – Ogelami 2013-04-30 09:40:42

我真的不明白我所需要的是一种两个字段的经纬度，点击提交将我带到地方 – rahul888 2013-04-30 09:50:50

对于任何人谁以后还会来，假设你想从数组中更新您的地图的纬度和经度（就像如果你有一个城市列表），你可以试试这个：

Globaly声明变量和数组

var latlon; 
var map; 
var coords = { 
'agra': '27.1767, 78.0081', 
'noida': '28.5355, 77.3910', 
'kanpur':'26.4499, 80.3319', 
};

添加一项功能，该功能可用于更改所选内容，以便在更改城市时自动更改地图。

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); 
}

为什么我评论过那么多行？这是因为我无意中创建了一个新的地图对象。由于我的地图也有一个搜索框，搜索框消失了，它的所有功能都丢失了。所以，最好是避免建立新的地图，终于在你的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>

来源

2017-09-08 11:30:35

更新谷歌地图的经纬度形式

回答

相关问题