将 javascript API 映射到 Django 项目

Question

我正在使用 Django 和 postgresql 后端创建一个房地产网络平台。我在我的 HTML 模板中实现了地图 API，以显示房地产所在的位置。 代码：

 <!--Map-->

      <div class="row mb-5">
        <div class="col-md-12">
          <style>
            #map{
              height:250px;
              width: 100%;
            }
          </style>
          <div id="map"></div>
          <script>
            function initMap(){
              var myLatLng = {lat:-33.90, lng:151.16};
              var options = {
                zoom:10,
                center:myLatLng
              };
              var map = new
              google.maps.Map(document.getElementById('map'),options);
            }
          </script>

        </div>
      </div>

标记将在下一步中添加，因为我必须弄清楚如何从数据库中检索我的 LAT 和 LNG 值并将它们显示在脚本中。有人知道答案吗？

为了进一步解释，我想做一些类似的东西

<script>
            function initMap(){
              var myLatLng = {lat:{{listing.geo_lat}}, {{listing.geo_lng}}};
              var options = {
                zoom:10,
                center:myLatLng
              };

但是我已经尝试过了，似乎 google api 无法读取我的值的正确格式，或者 Listing.geo_lat 在脚本中无法正常工作。

Answer 1

真的不知道它是否是一个优化的解决方案，但它有效。

      <div class="row mb-5">
        <div class="col-md-12">
          <style>
            #map{
              height:250px;
              width: 100%;
              max-width: none;
            }
          </style>
          <div id="map"></div>
          <script>

            let lat = "{{listing.lat}}";
            let lng = "{{listing.lng}}";
            let geo_lat = parseFloat(lat);
            let geo_lng = parseFloat(lng);

            function initMap(){
              var myLatLng = {lat:geo_lat, lng:geo_lng};
              var options = {
                zoom:11,
                center:myLatLng
              };
              var map = new
              google.maps.Map(document.getElementById('map'),options);
            }
          </script>

        </div>
      </div>