在现代Web开发中，利用地图进行坐标拾取和地址模糊查询是一个常见的需求。借助jQuery这一强大的JavaScript库，我们可以方便地实现这一功能。本文将介绍如何使用jQuery与Google Maps API结合，实现一个简单的地图坐标拾取和地址模糊查询的示例。
一、准备工作
首先，确保你拥有一个Google Maps API的密钥。在使用Google Maps之前，你需要在Google Cloud Console中创建一个项目并获取API密钥。
二、HTML结构
创建一个简单的HTML页面，包含一个地图容器、输入框和按钮，用于地址模糊查询。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>地图坐标拾取和地址模糊查询</title>
<style>
#map {
height: 500px;
width: 100%;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
<script>
let map, marker;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 39.9042, lng: 116.4074}, // 默认中心：中国北京
zoom: 10
});
// 添加点击事件以拾取坐标
map.addListener('click', function(event) {
placeMarker(event.latLng);
});
// 初始化marker
marker = new google.maps.Marker({
position: map.getCenter(),
map: map
});
}
function placeMarker(location) {
marker.setPosition(location);
$("#coordinates").val(location.lat() + ', ' + location.lng());
}
// 使用Geocoder进行地址模糊查询
function geocodeAddress() {
const geocoder = new google.maps.Geocoder();
const address = $("#address").val();
geocoder.geocode({'address': address}, function(results, status) {
if (status === 'OK') {
map.setCenter(results[0].geometry.location);
placeMarker(results[0].geometry.location);
} else {
alert('地址查询失败: ' + status);
}
});
}
$(document).ready(function() {
$("#search-button").click(function() {
geocodeAddress();
});
});
</script>
</head>
<body>
<h1>地图坐标拾取和地址模糊查询</h1>
<div>
<input type="text" id="address" placeholder="请输入地址">
<button id="search-button">查询</button>
</div>
<div id="map"></div>
<div>
<label>选中的坐标:</label>
<input type="text" id="coordinates" readonly>
</div>
</body>
</html>
三、代码解析
-
HTML结构: 首先，我们创建一个简单的HTML结构，包含一个文本输入框用于输入地址，一个按钮用于触发查询，以及一个用于显示地图的div。
-
地图初始化: 在
initMap函数中，我们初始化地图，设置地图中心为北京。使用google.maps.Map进行地图的创建，并调用map.addListener监听地图的点击事件。当用户点击地图时，会触发placeMarker函数，放置标记并显示坐标。 -
坐标拾取: 在
placeMarker函数中，根据用户点击的位置更新标记的位置，并将该位置的经纬度填入到隐藏的输入框中。 -
地址模糊查询: 在
geocodeAddress函数中，我们使用Google Maps的Geocoder服务，将用户输入的地址转化为经纬度，并将地图中心移至该位置。同时，更新标记的位置，展示查询结果。如果查询失败，则弹出错误提示。 -
事件绑定: 使用jQuery的
$(document).ready确保DOM加载完毕后绑定按钮的点击事件。
四、总结
通过以上步骤，我们实现了一个简单的地图坐标拾取和地址模糊查询功能。用户可以在地图上点击获取坐标，或者在输入框中输入地址进行查询。结合jQuery和Google Maps API，我们可以轻松构建各种地图相关的应用功能。我们可以在此基础上进一步扩展，比如添加更多的地图功能和优化用户体验。
