时间戳

首页 > 解决方案 > 使用 Google Map API 无法正确显示地图

google-api - 使用 Google Map API 无法正确显示地图

问题描述

我一直在努力解决使用 Google Map API 显示带有位置的地图的问题。正如您看到的结果页面，它正确显示了来自后端的数据，如house_lan和house_lng，但没有显示带有位置的地图。你能告诉我我错过了什么吗？

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta charset="UTF-8" />
    <title>Local Schools</title>
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
      integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"
      crossorigin="anonymous"
    />
    <script
      async
      defer
      src="https://maps.googleapis.com/maps/api/js?key=APIKEY&callback=initMap"
      type="text/javascript"
    ></script>
    <script type="text/javascript">
      function initMap() {
          new google.maps.Map(document.getElementById('map'), {
                center: {lat: {{house.lat}}, lng: {{house.lng}}},
                zoom: 16
              });
            }
    </script>
  </head>
  <body>
    <div class="container">
      <h1>{{house.id}}</h1>
      <div id="map" style="width: 100%; height: 500px;"></div>
      {{house.lat}} ---- {{house.lng}}
    </div>
  </body>
</html>

在此处输入图像描述

标签： google-api

解决方案

解决了。就我而言，我向后分配了错误的纬度、经度值。修改后，它已正确显示。

推荐阅读