0

我正在尝试使用 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);

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

4

1 回答 1

1

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

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

'它会将in编码SomeDude's为不会破坏您的字符串&#39;的渲染。SomeDude&#39;s

于 2013-10-08T20:56:26.667 回答