將坐標從 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 密鑰。

希望這可以幫助。