使用模板变量时，Django google-maps API v3 不适用于 Chrome

Posted 2023-02-24

【中文标题】使用模板变量时，Django google-maps API v3 不适用于 Chrome

【英文标题】：Django google-maps API v3 doesn't work with Chrome when using template variables

【发布时间】：2016-07-18 08:07:00

【问题描述】：

我想将纬度、经度变量传递给我的模板，以在 Google 地图上显示位置。为此，我在 javascript 中使用模板变量：

<script type="text/javascript">
  var map;
  function initMap() 
      map = new google.maps.Map(document.getElementById("map"), 
      center: lat:  m_city.location.y , lng:  m_city.location.x ,
      zoom: 10
      );
  
</script>

<script src="https://maps.googleapis.com/maps/api/js?key=KEY&callback=initMap"
async defer></script>

它在 Firefox 中运行良好，但 Chrome(v.42) 根本不显示地图。虽然在生成页面的源代码中经纬度被正确替换了。

如果我复制生成的纬度和经度并将其硬编码在模板中，则代码可以正常工作，Chrome 会显示地图。

谁能指出为什么会这样？

更新

正如 Selcuk 在 cmets 中指出的那样，问题出在小数分隔符（逗号而不是点）中。由于浏览器的语言设置不同，产生了不同的分隔符。将USE_L10N 设置为False 有帮助。

【问题讨论】：

能贴出生成的html源代码吗？

Selcuk，这里是生成的代码：

您的问题是逗号用作小数分隔符。它应该是一个点。如何在 Django 中存储 location.x 和 location.y？

我使用 GeoDjango 的 PointField

谢谢，确实，问题出在小数点分隔符上。奇怪的是，在 Chrome 中我得到lat: 37,36883, lng: -122,03635，即使使用DECIMAL_SEPARATOR = '.'，而在 Firefox 中生成正确的代码：lat: 37.36883, lng: -122.03635 有和没有小数分隔符设置。

【参考方案1】：

我建议使用localize模板标签，这样您就可以使用格式本地化而不会破坏您的javascript代码。

% localize off %
    <script type="text/javascript">
      var map;
      function initMap() 
          map = new google.maps.Map(document.getElementById("map"), 
          center: lat:  m_city.location.y , lng:  m_city.location.x ,
          zoom: 10
          );
      
    </script>
% endlocalize %
<script src="https://maps.googleapis.com/maps/api/js?key=KEY&callback=initMap"
async defer></script>