谷歌地图信息窗口不允许多个 Django 变量答案

【问题标题】：Google Maps Info Window Not Allowing Mulitple Django Variables谷歌地图信息窗口不允许多个 Django 变量
【发布时间】：2013-10-15 21:55:49
【问题描述】：

我正在尝试使用 google maps api 设置一个相对简单的信息窗口。我想从我的 django 后端将多个变量放入我的信息窗口。如果我只包含一个变量，它工作正常。但是，如果我尝试包含多个变量，则不会呈现任何内容。我不知道为什么。这是违规行：

'<h1 id="infolayer-title" class="firstHeading">{{ variable1 }} {{ variable2 }}</h1>'+

但是，奇怪的是，这很好用：

'<h1 id="infolayer-title" class="firstHeading">{{ variable1 }}</h1>'+

变量在标记中正确呈现，但出现 javascript 错误。 javascript 控制台在上面打印的行上显示SyntaxError: missing ; before statement，但在变量之前或之后包含分号并没有解决问题。

这里是完整的实现（大部分直接来自 maps api 文档）：

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script>
function initialize() {
  var myLatlng = new google.maps.LatLng(122, 5);
  var mapOptions = {
    zoom: 15,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  var contentString = '<div id="content">'+
      '<div id="infolayer">'+
      '</div>'+
      '<h1 id="infolayer-title" class="firstHeading">{{ variable1 }} {{ variable2 }}</h1>'+
      '<div id="bodyContent">'+
      '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
      'Heritage Site.</p>'+
      ...
      '</div>'+
      '</div>';

  var infowindow = new google.maps.InfoWindow({
      content: contentString
  });

  var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title: 'Hello World!'
  });

  google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map,marker);
  });
 }

google.maps.event.addDomListener(window, 'load', initialize);

如何在信息层窗口中使用多个变量来渲染地图？感谢您提供任何可能有助于解决这个令人困惑的问题的想法！

【问题讨论】：

渲染的代码是什么？即 variable1 和 variable2 的值是多少？
代码呈现为：'<h1 id="infolayer-title" class="firstHeading">SomeDude's Grandparent</h1>'+ 显然，这些只是虚拟变量。 @Joseph 感谢您的任何想法！
哦，我的错误我刚刚意识到省略撇号可以解决问题。为什么会这样？
这是因为' 是您定义字符串的字符，对吧？你用'<h1...打开字符串，用</h1>'关闭它，但在中间，你有...SomeDude's...。总而言之，就是'<h1...SomeDude's.../h1>'，看到问题了吗？请参阅我的答案以了解解决此问题的方法。

标签： javascript django google-maps variables infowindow

【解决方案1】：

SomeDude's 中的撇号作为该行的 contentString 的结尾，然后是更多内容。您需要转义这个变量，这应该默认发生，所以也许您关闭了自动转义？尝试用这个替换：

'<h1 id="infolayer-title" class="firstHeading">{% autoescape on %}{{ variable1 }} {{ variable2 }}{% endautoescape %}</h1>'+

它将SomeDude's 中的' 编码为&#39; 以呈现SomeDude&#39;s，这不会破坏您的字符串。

【讨论】：