通過緯度和經度表格更新Google地圖

Question

因此，我正在構建一個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)

並在我按下更新按鈕或提交按鈕時進行更新。 我知道如何創建表單，但不知道如何在上面的代碼中准確使用。

任何幫助，將不勝感激。

Answer 1

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

Answer 2

您可以使用Google Maps的API文檔

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

在您的情況下，您應該使用set map方法：

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

Answer 3

這是一個優雅的解決方案，將相機移至該點。

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

這直接跳到了重點。

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

Answer 4

對於以后再來的任何人，假設您想從數組中更新地圖的緯度和經度（例如，如果您有城市列表），可以嘗試以下操作：

全局聲明變量和數組

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>

通過緯度和經度表格更新Google地圖

問題描述

4 個解決方案

解決方案1
12 已采納 2013-04-30 09:46:32

解決方案2
2 2013-04-30 09:32:38

解決方案3
0 2013-04-30 09:33:30

解決方案4
0 2017-09-08 11:30:35

通過緯度和經度表格更新Google地圖

問題描述

4 個解決方案

解決方案1 12 已采納 2013-04-30 09:46:32

解決方案2 2 2013-04-30 09:32:38

解決方案3 0 2013-04-30 09:33:30

解決方案4 0 2017-09-08 11:30:35

解決方案1
12 已采納 2013-04-30 09:46:32

解決方案2
2 2013-04-30 09:32:38

解決方案3
0 2013-04-30 09:33:30

解決方案4
0 2017-09-08 11:30:35