JQuery实现地图坐标拾取和地址模糊查询

当前位置：电视猫 > 正则表达式>

电视猫时间： 2024-08-19 14:42:13

好的，以下是使用jQuery实现地图坐标拾取和地址模糊查询的示例代码：

HTML

<!DOCTYPE html>
<html>
<head>
  <title>jQuery地图坐标拾取和地址模糊查询</title>
  <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&libraries=places"></script   >
  <script>
    $(document).ready(function() {
      // 初始化地图
      var map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: 37.419028, lng: -122.081689},
        zoom: 12
      });

      // 创建地址模糊查询服务
      var autocompleteService = new google.maps.places.AutocompleteService();

      // 创建搜索框
      var input = document.getElementById('search-input');
      autocompleteService.bindTo('bounds', map);

      $(input).on('input', function() {
        var query = $(this).val();
        if (query) {
          // 进行地址模糊查询
          autocompleteService.getPlacePredictions({
            input: query
          }, function(predictions, status) {
            if (status === google.maps.places.PlacesServiceStatus.OK) {
              // 显示查询结果
              var options = '';
              for (var i = 0; i < predictions.length; i++) {
                options += '<option value="' + predictions[i].place_id + '">' + predictions[i].description + '</option>';
              }
              $('#results').html(options);
            }
          });
        } else {
          $('#results').html('');
        }
      });

      // 拾取坐标
      google.maps.event.addListener(map, 'click', function(event) {
        var lat = event.latLng.lat();
        var lng = event.latLng.lng();
        console.log('拾取的坐标：', lat, lng);
      });
    });
  </script>
</head>
<body>
  <div id="map" style="width: 500px; height: 400px;"></div>
  <input type="text" id="search-input" placeholder="输入地址">
  <select id="results"></select>
</body>
</html>

请将YOUR_API_KEY替换为您的Google Maps API密钥。

该代码实现了以下功能：