Javascript Google地图和表单输入之间的交互

我有这样一个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>

重新生成

纬度

经度
var映射；
函数initMap（）{
var latitude=parseFloat（$（'#lat'）.val（））；
var longitude=parseFloat（$（'#long'）.val（）；
变量映射选项={
缩放：13，
中心：新google.maps.LatLng（纬度、经度），
mapTypeId:google.maps.mapTypeId.TERRAIN
};
map=new google.maps.map（document.getElementById（'map'），mapOptions）；
}
$（“#lat”）.change（函数（）{
地点标记（）；
});
$（“#long”）.change（函数（）{
地点标记（）；
}); 
函数placeMarkers（）{
var latitude=parseFloat（$（'#lat'）.val（））；
var longitude=parseFloat（$（'#long'）.val（）；
var markerDep=新的google.maps.Marker({
位置：{纬度，经度}，
地图：地图，
标签：“D”，
真的，
标题：“出发”
});
var markerArr=new google.maps.Marker({
位置：{lat:纬度+0.01，lng:经度+0.01}，
地图：地图，
标签：“A”，
真的，
标题：“抵达”
});
}

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

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

---

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

我有一个可接受的解决方案，对于那些感兴趣的人，这里是：

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>

---

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

第一个问题是纬度和经度变量没有在initMap函数中设置。oops是的，它们以前设置过，但我当时移动了它们！我的错误：（更新）

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