如何將經度從HTML表單傳遞到Google Maps

Question

我想從用戶傳遞緯度和經度。 如何將參數從HTML表單傳遞到Google Map API？ 如何逐步學習完整的Google Map 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>

Answer 1

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

您還想驗證用戶輸入。 您應該檢查用戶輸入的數字，以及它們是有效的經度和緯度值。

有關如何在墨卡托投影上驗證緯度值的更多信息，請參見此處。

這是一個完整且有效的示例，可以實現您想要的：

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演示

Answer 2

輸入元素ID，例如：

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

只需使用Javascript獲取值即可：

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

如何將經度從HTML表單傳遞到Google Maps

問題描述

2 個解決方案

解決方案1
1 2015-03-05 07:58:16

解決方案2
0 2015-03-02 16:40:58

如何將經度從HTML表單傳遞到Google Maps

問題描述

2 個解決方案

解決方案1 1 2015-03-05 07:58:16

解決方案2 0 2015-03-02 16:40:58

解決方案1
1 2015-03-05 07:58:16

解決方案2
0 2015-03-02 16:40:58