谷歌地图和表单输入之间的交互

Question

我有一个这样的 HTML 页面：

 <button onclick="initMap()">Regenerate</button><BR>

    Latitude<input style="width: 5em;" id="lat" name="lat" type="number" value="35.9000" step="0.1"/></div><BR>
    Longitude<input style="width: 5em;" id="long" name="long" type="number" value="15.7500" step="0.1"/></div>


    <div id="map"></div>

        <script>

            var map;

            function initMap() {

                var latitude = parseFloat ($('#lat').val());
                var longitude = parseFloat ($('#long').val());

                var mapOptions = {

                    zoom: 13,
                    center: new google.maps.LatLng(latitude, longitude),
                    mapTypeId: google.maps.MapTypeId.TERRAIN

                };

                map = new google.maps.Map(document.getElementById('map'), mapOptions);


            }

        $( "#lat" ).change(function() {
            placeMarkers();
        });

        $( "#long" ).change(function() {
            placeMarkers();
        }); 

function placeMarkers() {

        var latitude = parseFloat ($('#lat').val());
        var longitude = parseFloat ($('#long').val());

        var markerDep = new google.maps.Marker({
          position: {lat: latitude, lng: longitude},
          map: map,
          label: "D",
          draggable: true,
          title: 'Departure'
        });

        var markerArr = new google.maps.Marker({
          position: {lat: latitude+0.01, lng: longitude+0.01},
          map: map,
          label: "A",
          draggable: true,
          title: 'Arrival'
        });

    }

        </script>

我想与用户在表单和地图中给出的值进行交互。

编辑：部分解决，见上面的代码

每次用户单击/更改值时刷新地图有点“繁重”。因此，我不想在每次输入更改时调用 initMap() ，而是只想替换标记？但是 placeMarkers() 无法做到这一点……除了第一次（加载时）。其他时候，他们会创建新的标记...

Answer 1

我有一个可以接受的解决方案，有兴趣的朋友可以看看：

Departure :
Latitude<input style="width: 5em;" id="latD" name="latD" type="number" value="37" step="0.01"/></div><BR>
Longitude<input style="width: 5em;" id="longD" name="longD" type="number" value="11" step="0.01"/></div>
<BR>
Arrival: <BR>
Latitude<input style="width: 5em;" id="latA" name="latA" type="number" value="38" step="0.01"/></div><BR>
Longitude<input style="width: 5em;" id="longA" name="longA" type="number" value="12" step="0.01"/></div>

<div id="map"></div>

<script>

    var map;
    var markerArr;
    var markerDep;

    //init function
    function initMap() {

        //used for the definition of the map's center
        var latitude = parseFloat ($('#latD').val());
        var longitude = parseFloat ($('#longD').val());

        var mapOptions = {

            zoom: 13,
            center: new google.maps.LatLng(latitude, longitude),
            mapTypeId: google.maps.MapTypeId.TERRAIN

        };

        map = new google.maps.Map(document.getElementById('map'), mapOptions);

        //creates the Departure and Arrival markers
        placeDepMarker();
        placeArrMarker();

    }

    //creates Departure
    function placeDepMarker() {

        var latitude = parseFloat ($('#latD').val());
        var longitude = parseFloat ($('#longD').val());

        markerDep = new google.maps.Marker({
            position: {lat: latitude, lng: longitude},
            map: map,
            label: "D",
            draggable: true,
            title: 'Departure'
        });

    }

    //creates Arrival
    function placeArrMarker() {

        var latitude = parseFloat ($('#latA').val());
        var longitude = parseFloat ($('#longA').val());

        markerArr = new google.maps.Marker({
            position: {lat: latitude+0.01, lng: longitude+0.01},
            map: map,
            label: "A",
            draggable: true,
            title: 'Arrival'
            });                 
    }

    //Erases Arrival marker
    function clearArrMarker() {
        markerArr.setMap(null);
    }

    //erases Departure marker
    function clearDepMarker() {
        markerDep.setMap(null);
    }

    $( "#latD, #longD").change(function() {
        clearDepMarker();
        placeDepMarker();
    });

    $( "#latA, #longA").change(function() {
        clearArrMarker();
        placeArrMarker();
    });



</script>

当然，可以实现许多改进，例如 clearDepMarker() 和 clearArrMarker() 可以在同一个函数中实现：

//erases the given marker
    function clearMarker(marker) {
        marker.setMap(null);
    }

现在我需要考虑拖放以刷新表单