Question

我想从一个带有laravel的数据库中获取的地址中心谷歌地图。但是地图没有显示。问题在哪里？

＆＃13;

    <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>

＆＃13;

Answer 1

您应该显示更多代码，并返回错误代码。无论如何，我认为这是你通过地址的方式或你的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>

从地址中心谷歌地图

1 个答案: