將Google地圖從地址居中
[英]Centering google maps from address
問題描述
我想用laravel從數據庫中獲取的地址居中放置Google地圖。 但是，該地圖未顯示。 問題出在哪兒？
<script> function initMap() { getLocations(); } function getLocations() { var http = new XMLHttpRequest(); http.open('GET', 'https://maps.googleapis.com/maps/api/geocode/json?address=' + {{ $address }} + '&key=AIzaSyCkCcwU02g9AlDkBzL6S6MbRBUNi8Z7atI', true); http.onload = function() { var coordinates = JSON.parse(http.responseText); coordinates = coordinates['results'][0]['geometry']['location']; var event = {lat: coordinates['lat'], lng: coordinates['lng']}; var map = new google.maps.Map(document.getElementById('map'), { zoom: 12, center: event }); var marker = new google.maps.Marker({ position: event, map: map }); }; http.send(); } </script> <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkCcwU02g9AlDkBzL6S6MbRBUNi8Z7atI&callback=initMap"> </script>
1 個解決方案
解決方案1
1 已采納 2018-01-17 20:15:37
您應該多展示一些代碼，並提供返回的錯誤代碼。 無論如何，我認為這要么是您通過地址的方式，要么是您具有html設置的方式。 快速檢查地址是否正確的方法是發出警報。 或者，您可以測試服務器是否響應200。
查看以下有效的代碼，以下是代碼段
<!DOCTYPE html> <html> <head> <style> #map { height: 400px; width: 100%; } </style> </head> <body> <h3>My Google Maps Demo</h3> <div id="map"></div> <script> function initMap() { var uluru = {lat: -25.363, lng: 131.044}; var map = new google.maps.Map(document.getElementById('map'), { zoom: 4, center: uluru }); var marker = new google.maps.Marker({ position: uluru, map: map }); getLocations(); } function getLocations() { var http = new XMLHttpRequest(); http.open('GET', 'https://maps.googleapis.com/maps/api/geocode/json?address=1600+Amphitheatre+Parkway,+Mountain+View,+CA&&key=AIzaSyCkCcwU02g9AlDkBzL6S6MbRBUNi8Z7atI', true); http.onload = function() { var coordinates = JSON.parse(http.responseText); coordinates = coordinates['results'][0]['geometry']['location']; var event = {lat: coordinates['lat'], lng: coordinates['lng']}; var map = new google.maps.Map(document.getElementById('map'), { zoom: 12, center: event }); var marker = new google.maps.Marker({ position: event, map: map }); }; http.send(); } </script> <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkCcwU02g9AlDkBzL6S6MbRBUNi8Z7atI&callback=initMap"> </script> </body> </html>
將響應式Google地圖居中
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.