Question

我在网页上添加了Google地图，它还有一个带有Google地图自动填充功能的文本框。用户可以通过单击地图或在“自动填充”文本框中键入位置地址在地图上添加标记。如果用户点击地图，则会在地图上添加标记，并且该位置的地址会显示在自动填充文本框中。

代码：

<script src="~/Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&region=LK&libraries=places"></script>
<div id="map"></div>
<input id="inputLocation" name="inputLocation" type="text">

<script type="text/javascript">

    $(function () {

        var mapOptions = {
            zoom: 10,
            center: new google.maps.LatLng(6.9182471651737405, 80.70556640625),
            streetViewControl: false
        };

        var autocompeteOptions = {
            componentRestrictions: { country: "lk" }
        };

        var map;
        var locationMarker;

        var geocoder = new google.maps.Geocoder();

        function initialize() {

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

            //Add marker when user clicked on Map
            google.maps.event.addListener(map, 'click', function (event) {

                var location = event.latLng;

                if (locationMarker) {
                    locationMarker.setMap(null);
                }

                geocoder.geocode({ 'latLng': location }, function (results, status) {
                    if (status == google.maps.GeocoderStatus.OK) {
                        if (results[1]) {

                            //locationMarker
                            locationMarker = new google.maps.Marker({
                                position: location,
                                map: map
                            });

                            document.getElementById('inputLocation').value = results[1].formatted_address;

                        } else {
                            alert('No results found');
                        }
                    } else {
                        alert('Geocoder failed due to: ' + status);
                    }
                });

            }); //click

            var autocompleteInput = new google.maps.places.Autocomplete(document.getElementById('inputLocation'), autocompeteOptions);

            //Autocomplete place Changed
            google.maps.event.addListener(autocompleteInput, 'place_changed', function () {

                autocompleteInput.bindTo('bounds', map);

                locationMarker = new google.maps.Marker({
                    map: map
                });

                var selectedPlace = autocompleteInput.getPlace();
                if (!selectedPlace.geometry) {
                    return;
                }

                if (selectedPlace.geometry.viewport) {
                    map.fitBounds(selectedPlace.geometry.viewport);
                } else {
                    map.setCenter(selectedPlace.geometry.location);
                    map.setZoom(17);
                }

                locationMarker.setPosition(selectedPlace.geometry.location);

                var locationAddress = '';
                if (selectedPlace.address_components) {
                    address = [
                      (selectedPlace.address_components[0] && selectedPlace.address_components[0].short_name || ''),
                      (selectedPlace.address_components[1] && selectedPlace.address_components[1].short_name || ''),
                      (selectedPlace.address_components[2] && selectedPlace.address_components[2].short_name || '')
                    ].join(' ');
                }

            }); //From place_changed

        }

        google.maps.event.addDomListener(window, 'load', initialize);

    });
</script>

这在计算机网络浏览器上运行良好，但是当我在移动设备（Galaxy S III，iPhone 5，...）上进行测试时，它无法按预期工作（在实际设备和Chrome模拟器上）。

如果我首先单击输入文本框然后单击地图，它会在地图上添加标记并在输入文本框中显示地址，但如果我单击页面上的某个位置，地址文本框值将丢失。（只有在单击地图之前对文本框进行了聚焦时才会发生这种情况）

我有什么办法可以解决这个问题吗？

Answer 1

如AntoJurković所评论，这也发生在FF。

您可能会发现不同之处：

当它按预期工作时，输入没有焦点。当它失败时，单击地图时输入不会失去焦点。

原因：

自动填充功能在内部侦听focus和blur。当您点击页面上的某个位置（而不是地图）时，自动填充功能将丢失focus，并且会触发自动填充的blur - 侦听器。

blur - 侦听器会将输入值设置为当前位置的name - 属性。当前位置将根据自动填充请求的结果在内部存储（在这种情况下为空）。

自动完成不会注意到输入值的更改（由编程方式应用），它只会侦听输入的键 - 事件。

所以你可以做的是：

从输入中移除焦点（在click - 地图回调中或在设置输入值之前）：

 document.getElementById('inputLocation').blur();

Google Maps API自动填充输入文本框值丢失

1 个答案: