从 Google Maps API 将坐标发布到数据库

Question

编辑：我解决了这个问题。保留它以防将来有人需要类似的东西。

我正在尝试使用 google map api 来获取坐标并将信息保存在数据库中。如果用户拖动标记，则使用信息更新表单。如果需要，用户还可以在表单中手动输入信息，地图将使用新标记进行更新。然后用户可以点击提交，信息将保存在数据库中。

<form action="{{ route('YOUR_ROUTE') }}" method="post" enctype="multipart/form-data">

<div class="form-group">

<div style="padding-top: 10px;">
                                <div id="map-location"></div>
                            </div>

{{--                            visibility, lat, lng, location --}}

                                <input class="form-control" type="text" name="location_name" id="location_name" placeholder="Location">

                                <input class="form-control" type="text" name="latitude" id="latitude" placeholder="Latitude" style="max-width: 50%;">

                                <input class="form-control" type="text" name="longitude" id="longitude" placeholder="Longitude" style="max-width: 50%;">


                        <button type="submit" class="btn btn-primary">Post</button>
                        <input type="hidden" value="{{ Session::token() }}" name="_token">
                        
                        </div>
                    </form>
                    
                    
                    
<script>
        //initialise and add the map
        function initMap(){
//    location of midtown manhattan
            var midtown = {lat: 40.7549, lng: -73.9840};
//    the maps centered at midtown
            var map = new google.maps.Map(document.getElementById('map-location'),{zoom:17, center:midtown});
//    the marker
            var marker = new google.maps.Marker({position: midtown, map: map, draggable: true});

            infoWindow = new google.maps.InfoWindow;

            // Try HTML5 geolocation.
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function(position) {
                    var pos = {
                        lat: position.coords.latitude,
                        lng: position.coords.longitude
                    };

                    marker.setPosition(pos);

                    map.setCenter(pos);
                }, function() {
                    handleLocationError(true, infoWindow, map.getCenter());
                });
            } else {
                // Browser doesn't support Geolocation
                handleLocationError(false, infoWindow, map.getCenter());
            }

        function handleLocationError(browserHasGeolocation, infoWindow, pos) {
            infoWindow.setPosition(pos);
            infoWindow.setContent(browserHasGeolocation ?
                'Error: The Geolocation service failed.' :
                'Error: Your browser doesn\'t support geolocation.');
            infoWindow.open(map);
        }

            //    dragged event of the marker
            google.maps.event.addListener(marker, 'dragend', function(){
                var lat = marker.getPosition().lat();
                var lng = marker.getPosition().lng();
                var address;

                $('#latitude').val(lat);
                $('#longitude').val(lng);

                var geocoder = new google.maps.Geocoder();
                geocoder.geocode({latLng: marker.getPosition()}, function(result,status){
                    if(status == google.maps.GeocoderStatus.OK){
                        address = result[0].formatted_address;
                        // console.log(address);
                        $('#location_name').val(address);
                    }
                    else{
                        console.log('Geocode was not successful for the following reason: ' + status);
                    }
                });
            });

        //    when the place is changed in the location box the map updates
            searchBox = new google.maps.places.SearchBox(document.querySelector( '#location_name' ));

            google.maps.event.addListener(searchBox, 'places_changed', function(){
                var places = searchBox.getPlaces(),
                bounds = new google.maps.LatLngBounds();

                for(var i = 0; place = places[i]; i++){
                    bounds.extend(place.geometry.location);
                    marker.setPosition(place.geometry.location);
                }

                map.fitBounds(bounds);
                map.setZoom(15);

                var lat = marker.getPosition().lat();
                var lng = marker.getPosition().lng();

                $('#latitude').val(lat);
                $('#longitude').val(lng);
            });
        }
    </script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&libraries=places&callback=initMap"></script>

Answer 1

我用适合我的代码更新了我的第一篇文章。

我无法使用表单中的信息更新地图，因为我在加载 Maps JavaScript API 时没有包含地点库。

拖动地图标记后我看不到更新的坐标，因为我没有启用地理编码 API，也没有使用谷歌云创建结算帐户。我还限制了我的 API 密钥。

希望这会有所帮助。