JQuery+HTML+JavaScript：实现地图位置选取和地址模糊查询

这篇文章距离上次修改已过204天，其中的内容可能已经有所变动。

以下是一个简化的代码示例，展示了如何使用jQuery、HTML和JavaScript来实现地图位置选取和地址模糊查询的基本功能。




<!DOCTYPE html>
<html>
<head>
    <title>地图选点和模糊查询</title>
    <meta charset="utf-8">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- 引入地图相关的JS库 -->
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
    <style>
        #map {
            width: 500px;
            height: 400px;
        }
    </style>
</head>
<body>
    <div id="map"></div>
    <input type="text" id="address" placeholder="请输入地址">
    <button id="findAddress">查询</button>
 
    <script>
        var map;
        var geocoder;
        var marker;
 
        function initMap() {
            map = new google.maps.Map(document.getElementById('map'), {
                center: {lat: -34.397, lng: 150.644},
                zoom: 8
            });
            geocoder = new google.maps.Geocoder();
            marker = new google.maps.Marker({map: map});
 
            $('#findAddress').on('click', function() {
                var address = $('#address').val();
                geocodeAddress(geocoder, map, marker, address);
            });
        }
 
        function geocodeAddress(geocoder, map, marker, address) {
            geocoder.geocode({'address': address}, function(results, status) {
                if (status === 'OK') {
                    map.setCenter(results[0].geometry.location);
                    marker.setPosition(results[0].geometry.location);
                } else {
                    alert('找不到地址: ' + status);
                }
            });
        }
    </script>
</body>
</html>

在这个示例中，我们首先在HTML中定义了地图容器和用于输入地址的输入框，以及一个触发地址查询的按钮。在JavaScript部分，我们初始化了Google地图，并在地图上设置了一个标记，用于表示用户选取的位置。我们还为查询按钮绑定了点击事件，当用户点击按钮时，会调用geocodeAddress函数，使用Google地理编码服务查询输入的地址，并将查询结果显示在地图上。

请注意，您需要替换YOUR_API_KEY为您自己的Google Maps API密钥，以确保地图功能正常。

JQuery+HTML+JavaScript：实现地图位置选取和地址模糊查询

评论已关闭

推荐阅读