如何解决模态中具有自动完成功能的Google Maps Search Box
是否可以在模式中使用具有自动完成功能的Google Maps搜索框? 不是整个地图,只有搜索框。
类似这样的东西:
解决方法
几小时后,我似乎找到了一种方法:)
HTML:
<div class="modal fade" id="searchModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-md" role="document">
<div class="modal-content">
<div class="modal-body">
<div class="md-form ml-0 mr-0">
<!-- Autocomplete location search input -->
<div class="form-group">
<label>Τοποθεσία:</label>
<input type="text" class="form-control" id="search_input" placeholder="Αναζήτηση διεύθυνσης..." />
<input type="hidden" id="loc_lat" />
<input type="hidden" id="loc_long" />
</div>
<!-- Display latitude and longitude -->
<div class="latlong-view">
<p style="text-align: center;">
<b>Latitude:</b>
<span id="latitude_view"></span>
<b>| Longitude:</b>
<span id="longitude_view"></span>
</p>
</div>
</div>
<div class="text-center mt-4">
<button class="btn btn-cyan waves-effect waves-light" onclick="goTo()" style=" font-size: 1.2rem;">
<i class="fa fa-search ml-1"></i>
</button>
</div>
</div>
</div>
</div>
JavaScript:
/* Google Maps Search handler */
var searchInput = 'search_input';
$(document).ready(function() {
var autocomplete;
autocomplete = new google.maps.places.Autocomplete((document.getElementById(searchInput)),{
types: ['geocode'],componentRestrictions: {
country: "GR"
}
});
google.maps.event.addListener(autocomplete,'place_changed',function() {
var near_place = autocomplete.getPlace();
document.getElementById('loc_lat').value = near_place.geometry.location.lat();
document.getElementById('loc_long').value = near_place.geometry.location.lng();
document.getElementById('latitude_view').innerHTML = near_place.geometry.location.lat();
document.getElementById('longitude_view').innerHTML = near_place.geometry.location.lng();
});
});
$(document).on('change','#' + searchInput,function() {
document.getElementById('latitude_view').innerHTML = '';
document.getElementById('longitude_view').innerHTML = '';
});
/* Google Maps - Go to searched location */
function goTo() {
var lat = Number(document.getElementById("latitude_view").innerText);
var lon = Number(document.getElementById("longitude_view").innerText);
console.log(lat);
console.log(lon);
if (lat != 0 && lon != 0) {
map.setCenter({
lat: lat,lng: lon
});
map.setZoom(18);
} else
alert("Μη αποδεκτές συντεταγμένες");
}
/* END of Google Maps Search handler */
请注意,必须使用地方信息库才能使其正常工作。
<script defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&libraries=places&callback=initMap"></script>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。