Google Maps API自动完成输入文本框值丢失

我在网页上添加了Google地图，它还具有带Google地图自动完成功能的文本框。用户可以通过点击地图或在自动填充文本框中输入位置地址来在地图上添加标记。如果用户点击地图，地图上会添加一个标记，并且该位置的地址会显示在自动填充文本框中。Google Maps API自动完成输入文本框值丢失

代码：

<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>

这适用于电脑的网络浏览器，但是当我测试它在移动设备上（银河S III，iPhone 5，...）如预期它不工作（实际设备和Chrome模拟器）。

如果我第一次点击输入文本框，然后点击地图，它会在地图上添加标记并在输入文本框中显示地址，但如果我在页面上单击某处，地址文本框的值就会丢失。（只有当文本框在点击地图之前关注时才会发生这种情况）

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

来源

2014-02-15 Nalaka526

文本框中FF：信息的相同行为会丢失。控制台中没有任何消息。 –

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

您可能会发现一个区别：

当它工作正常输入不具有焦点。当它失败时，当你点击地图时输入不会失去焦点。

原因：

自动完成内部监听focus和blur。当您点击页面上的某处（而不是地图）时，自动完成将失去focus，并且将触发自动完成的听众。

blur -listener将输入值设置为当前地点的name属性。当前位置将根据自动完成请求的结果（在此情况下为空）存储在内部。

自动完成不会注意到输入值的变化（如您以编程方式应用），它只会侦听输入事件的键。

所以你可以做的是：

从输入清除病灶（无论是在地图的click -callback或之前设置的输入值）：

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

来源

2014-02-15 19:40:59

Google Maps API自动完成输入文本框值丢失

回答

相关问题