如何將緯度經度從HTML表單傳遞到Google地圖

我想傳遞用戶的緯度和經度。我如何將參數從html表單傳遞到Google地圖API？如何逐步學習完整的Google地圖API並開始結束。以及如何將一個lat和lng添加到一個地圖？如何將緯度經度從HTML表單傳遞到Google地圖

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

來源

2015-03-02 Muhammad Sohaib Roomi

我確定Google的文檔和教程應該解釋這一點。你看過那裏嗎？ – RudolphEst 2015-03-02 16:52:15

給這個元素的ID，如：

<input type="text" id="lat" name="lat" value="13.053147716796578" />

只需使用JavaScript來獲取值：

var lat=document.getElementById('lat').value; 
var lng=document.getElementById('lng').value;

來源

2015-03-02 16:40:58 bobdye

它不工作親愛的。我應該創建任何函數來獲取值並在地圖函數中使用它們嗎？ – 2015-03-03 14:17:37

你不應該。你可以顯示你的新的Javascript和HTML的變化？ – bobdye 2015-03-03 16:17:02

– 2015-03-03 18:06:13

使用google.maps.event.addDomListener聽表單提交事件。
給你的經緯度和lng輸入字段一個ID，以便你可以識別它們。
從表單值中創建一個標記（和/或在地點上的中心地圖）。

您還想要驗證用戶輸入。您應該檢查用戶是否輸入了數字，並確認它們是有效的經緯度值。

更多信息here關於如何驗證墨卡託投影的緯度值。

這是一個完整的工作示例實現你想要什麼：

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

// 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();

演示

JSFiddle demo

來源

2015-03-05 07:58:16 MrUpsidown

如何將緯度經度從HTML表單傳遞到Google地圖

回答

相關問題