Question

我想从用户传递纬度和经度。如何将参数从html格式传递到谷歌地图API？如何逐步学习完整的谷歌地图API，从头到尾。以及如何在一张地图上添加多个lat和lng？

  <!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收听表单提交事件。
为您的lat和lng输入字段添加ID，以便识别它们。
从表单值创建标记（和/或将地图置于中心位置）。

您还想验证用户输入。您应检查用户是否输入了数字，以及它们是有效的lat和lng值。

有关如何验证墨卡托投影上的纬度值的更多信息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

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;

如何将Latitude Longitude从HTML表单传递到Google Maps

2 个答案: