如何使用 ajax google 脚本在 php 中搜索位置

📌 相关文章

📜 如何使用 ajax google 脚本在 php 中搜索位置 - PHP (1)

📅 最后修改于: 2023-12-03 15:37:57.580000 🧑 作者: Mango

在 PHP 中使用 AJAX 和 Google 脚本来搜索位置非常简单。以下是步骤：

步骤 1：创建 HTML 文件

首先，我们需要在 HTML 文件中创建一个表单和一个用于显示查询结果的 <div>。

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
      <script src="script.js"></script>
   </head>
   <body>
      <form>
         <label for="address">Address:</label>
         <input type="text" id="address" name="address"><br><br>
         <input type="button" value="Search" onclick="searchLocation()">
      </form>
      <div id="map"></div>
   </body>
</html>

步骤 2：创建 PHP 文件

在 PHP 文件中，我们需要使用 AJAX 来获取表单中输入的地址，并将其发送到 Google 脚本。

<?php
   if(isset($_POST['address'])) {
      $address = $_POST['address'];
      $url = 'https://maps.googleapis.com/maps/api/geocode/json?address='.urlencode($address).'&key=YOUR_API_KEY';
      $resp_json = file_get_contents($url);
      $resp = json_decode($resp_json, true);
   
      if($resp['status']=='OK') {
         $lat = $resp['results'][0]['geometry']['location']['lat'];
         $lng = $resp['results'][0]['geometry']['location']['lng'];
         echo json_encode(array('lat'=>$lat, 'lng'=>$lng));
      } else {
         echo 'Error: Invalid address';
      }
   }
?>

步骤 3：创建 JavaScript 文件

在 JavaScript 文件中，我们需要使用 AJAX 来将地址发送到 PHP 文件并获取响应，然后将响应用于在 <div> 中显示地图。

function searchLocation() {
   var address = $('#address').val();
   
   $.ajax({
      url: 'search.php',
      type: 'POST',
      data: {address: address},
      dataType: 'json',
      success: function(response) {
         var lat = response.lat;
         var lng = response.lng;
         
         var mapOptions = {
            center: new google.maps.LatLng(lat,lng),
            zoom: 12
         };
         
         var map = new google.maps.Map(document.getElementById('map'), mapOptions);
         
         var marker = new google.maps.Marker({
            position: new google.maps.LatLng(lat,lng),
            map: map
         });
      },
      error: function(jqXHR, textStatus, errorThrown) {
         alert('Error: ' + textStatus + ' - ' + errorThrown);
      }
   });
}

步骤 4：运行代码

最后，打开 HTML 文件并输入地址，然后单击“搜索”按钮，即可在地图上显示查询结果。

总结

在本文中，我们学习了如何使用 AJAX 和 Google 脚本在 PHP 中搜索位置。我们使用了 HTML、PHP 和 JavaScript，以及 Google 脚本 API 来实现这个功能。如果你有任何问题或疑问，请在评论区留言。