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密钥。

该代码实现了以下功能：