JavaScript-Google Maps API自动完成输入文本框值丢失
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了JavaScript-Google Maps API自动完成输入文本框值丢失，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3499字，纯文字阅读大概需要5分钟。
内容图文
我在网页上添加了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®ion=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>
这在计算机Web浏览器上可以正常工作,但是当我在移动设备(Galaxy S III,iPhone 5 …)上对其进行测试时,它无法按预期运行(在实际设备和Chrome模拟器上).
如果我先单击输入文本框,然后在地图上单击,它将在地图上添加标记并在输入文本框中显示地址,但是如果我单击页面上的某个位置,则地址文本框值会丢失. (仅当文本框在单击地图之前被聚焦后才会发生)
有什么我可以解决的问题吗？
解决方法:
正如AntoJurkovi?所评论的那样,这也发生在FF中.
您可能会发现一个差异：
当它按预期工作时,输入将不具有焦点.如果失败,则单击地图时输入不会失去焦点.
原因：
自动完成功能会在内部聆听聚焦和模糊.当您单击页面上的某处(而不是地图)时,自动完成功能将失去焦点,并且将触发自动完成功能的模糊监听器.
模糊侦听器会将输入的值设置为当前位置的名称属性.当前位置将根据自动完成请求的结果在内部存储(在这种情况下为空).
自动完成功能不会注意到输入值的更改(以编程方式应用),它只会侦听输入的键事件.
因此,您可以做的是：
从输入中移除焦点(在地图的点击回调中或在设置输入值之前)：
document.getElementById('inputLocation').blur();
内容总结
以上是互联网集市为您收集整理的JavaScript-Google Maps API自动完成输入文本框值丢失全部内容，希望文章能够帮你解决JavaScript-Google Maps API自动完成输入文本框值丢失所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。