JQuery实现地图坐标拾取和地址模糊查询
以下是一个简化的代码示例，展示了如何使用jQuery来实现地图坐标拾取和地址模糊查询的基本框架。请注意，这个示例假设你已经有了一个地图API（如Google Maps API）和一个模糊查询API（如Google Places API）。
<!DOCTYPE html>
<html>
<head>
<title>地图坐标拾取与模糊查询</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- 引入地图API -->
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
<!-- 引入模糊查询API -->
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap" async defer></script>
<style>
/* 样式 */
</style>
</head>
<body>
<div id="map"></div>
<input type="text" id="address" placeholder="Enter the address">
<button id="getCoordinates">Get Coordinates</button>
<div id="coordinates"></div>
<script>
$(document).ready(function() {
$('#getCoordinates').click(function() {
var address = $('#address').val();
// 地址模糊查询
$.ajax({
type: 'GET',
url: 'https://maps.googleapis.com/maps/api/geocode/json',
data: {
address: address,
key: 'YOUR_API_KEY'
},
success: function(response) {
if (response.status === 'OK') {
var coordinates = response.results[0].geometry.location;
$('#coordinates').text('Latitude: ' + coordinates.lat + ', Longitude: ' + coordinates.lng);
} else {
$('#coordinates').text('Cannot find coordinates for the address');
}
}
});
});
});
function initMap() {
// 地图初始化代码
}
</script>
</body>
</html>
``
评论已关闭