在laravel中使用google地图和mysql进行radius搜索

   public function search(Request $request)

   {

       $address = $request->input('address');

       $radius = $request->input('radius');

       // 使用Google Geocoding API将地址转换为经纬度坐标

       $client = new Client();

       $response = $client->get('https://maps.googleapis.com/maps/api/geocode/json', [

           'query' => [

               'address' => $address,

               'key' => config('app.google_maps_api_key'),

           ],

       ]);

       $data = json_decode($response->getBody(), true);

       $location = $data['results'][0]['geometry']['location'];

       $latitude = $location['lat'];

       $longitude = $location['lng'];

       // 使用MySQL进行半径搜索

       $results = DB::select(DB::raw('

           SELECT *,

               (6371 * acos(cos(radians(' . $latitude . ')) * cos(radians(latitude)) * cos(radians(longitude) - radians(' . $longitude . ')) + sin(radians(' . $latitude . ')) * sin(radians(latitude))))

               AS distance

           FROM locations

           HAVING distance < ' . $radius . '

           ORDER BY distance

       '));

       return response()->json($results);

   }

   <title>Radius Search</title>

   <script src="https://maps.googleapis.com/maps/api/js?key={{ config('app.google_maps_api_key') }}&libraries=places"></script>

   <script>

       function initMap() {

           var map = new google.maps.Map(document.getElementById('map'), {

               center: {lat: -34.397, lng: 150.644},

               zoom: 8

           });

           var input = document.getElementById('address');

           var searchBox = new google.maps.places.SearchBox(input);

           map.addListener('bounds_changed', function() {

               searchBox.setBounds(map.getBounds());

           });

           var markers = [];

           searchBox.addListener('places_changed', function() {

               var places = searchBox.getPlaces();

               if (places.length === 0) {

                   return;

               }

               markers.forEach(function(marker) {

                   marker.setMap(null);

               });

               markers = [];

               var bounds = new google.maps.LatLngBounds();

               places.forEach(function(place) {

                   if (!place.geometry) {

                       console.log("Returned place contains no geometry");

                       return;

                   }

                   markers.push(new google.maps.Marker({

                       map: map,

                       title: place.name,

                       position: place.geometry.location

                   }));

                   if (place.geometry.viewport) {

                       bounds.union(place.geometry.viewport);

                   } else {

                       bounds.extend(place.geometry.location);

                   }

               });

               map.fitBounds(bounds);

           });

       }

   </script>

   <input id="address" type="text" placeholder="Enter a location">

   <input id="radius" type="number" placeholder="Enter a radius">

   <button onclick="search()">Search</button>

   <div id="map" style="height: 400px;"></div>

   <script>

       function search() {

           var address = document.getElementById('address').value;

           var radius = document.getElementById('radius').value;

           axios.post('/search', {

               address: address,

               radius: radius

           })

           .then(function (response) {

               console.log(response.data);

           })

           .catch(function (error) {

               console.log(error);

           });

       }

   </script>