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

Question

我想将纬度、经度变量传递到我的模板以在 Google map 上显示位置。为此，我在 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) 根本不显示 map 。尽管在生成页面的源代码中经纬度被正确替换。

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

谁能告诉我为什么会这样？

更新

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

Answer 1

我建议使用 localize templatetag，这样您就可以在不破坏 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>