几个小时后,我似乎找到了一种方法:)
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>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句