如何根据输入字段中的纬度和经度更新谷歌地图标记

Question

我有一个文本区域字段，用户可以在其中键入或粘贴地址，然后我使用谷歌地理编码器将这些地址转换为纬度和经度，并将它们显示在纬度和经度表单字段上。用户也可以拖动以重新定位特定地址的标记。我的问题是在它转换成纬度和经度之后，我希望谷歌地图标记在默认的纬度和经度上自动更新它的位置。 这是地址转换为经纬度的代码。

function getAddress() {
        var geocoder = new google.maps.Geocoder();
        var addr = document.getElementById('ClinicAddress').value;
        geocoder.geocode({'address': addr}, function (results, status) {
            if (status === google.maps.GeocoderStatus.OK) {
                var latitude = results[0].geometry.location.lat();
                var longitude = results[0].geometry.location.lng();
                document.getElementById('ClinicLatitude').value = latitude;
                document.getElementById('ClinicLongitude').value = longitude;
            }
        });
    }

这是我拖动谷歌地图标记的代码

function initialize() {
        var $latitude = document.getElementById('ClinicLatitude');
        var $longitude = document.getElementById('ClinicLongitude');
        //default latitude and longitude for Tokyo JP
        var latitude = 35.7061767;
        var longitude = 139.7340773;
        document.addEventListener('input', function() {
            if($latitude.value !== '' && $longitude.value !== '') {
                latitude = $latitude.value;
                longitude = $longitude.value;
                alert(latitude + "," + longitude);
            }
        });

        var zoom = 15;
        var LatLng = new google.maps.LatLng(latitude, longitude);
        var mapOptions = {
            zoom: zoom,
            center: LatLng,
            panControl: false,
            zoomControl: false,
            scaleControl: true,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById('google_map'), mapOptions);
        var marker = new google.maps.Marker({
            position: LatLng,
            map: map,
            title: 'Drag to specify your address',
            draggable: true
        });

        google.maps.event.addListener(marker, 'dragend', function (marker) {
            var latLng = marker.latLng;
            $latitude.value = latLng.lat();
            $longitude.value = latLng.lng();
        });
    }
    initialize();

Answer 1

好的，我终于找到了解决方案。欢迎任何更好的解决方案。

    function getAddress() {
            var geocoder = new google.maps.Geocoder();
            var addr = document.getElementById('ClinicAddress').value;
            geocoder.geocode({'address': addr}, function (results, status) {
                if (status === google.maps.GeocoderStatus.OK) {
                    var latitude = results[0].geometry.location.lat();
                    var longitude = results[0].geometry.location.lng();
                    document.getElementById('ClinicLatitude').value = latitude;
                    document.getElementById('ClinicLongitude').value = longitude;
                    //call initialize to update new location with latitude and longitude
                    initialize(latitude,longitude);
                }
            });
        }

        //getting google map api on form
        function initialize(latitude,longitude) {
            var $latitude = document.getElementById('ClinicLatitude');
            var $longitude = document.getElementById('ClinicLongitude');
            //default latitude and longitude for Tokyo JP
            //var latitude = 35.7061767;
            //var longitude = 139.7340773;      
            var zoom = 15;
            var LatLng = new google.maps.LatLng(latitude, longitude);
            var mapOptions = {
                zoom: zoom,
                center: LatLng,
                panControl: false,
                zoomControl: false,
                scaleControl: true,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById('google_map'), mapOptions);
            var marker = new google.maps.Marker({
                position: LatLng,
                map: map,
                title: 'Drag to specify your address',
                draggable: true
            });

            google.maps.event.addListener(marker, 'dragend', function (marker) {
                var latLng = marker.latLng;
                $latitude.value = latLng.lat();
                $longitude.value = latLng.lng();
            });
        }
        //set default latitude and longitude
        initialize('35.7061767','139.7340773');