单击 Google Maps Javascript 打开表格

Question

所以我正在使用 Google Maps Javascript Api 并且目前有一个填充了圆圈的地图。我希望能够单击一个圆圈并让它打开一个包含一些信息的表格，但不确定如何执行此操作。我已经能够点击圆圈并使用它弹出一个信息框：

var contentString = city[0].toString() + ": " + city[1].toString() + " shooting(s)";
var infoWindow= new google.maps.InfoWindow({
    content: contentString
    });

google.maps.event.addListener(cityCircle, 'click', function(ev){
    infoWindow.setPosition(cityCircle.getCenter());
    infoWindow.open(map);
});
 // });

}

我不确定如何将此信息框格式化为表格。我试过这样的事情：

var contentString = "<table width="100%" border="1">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td rowspan="2">&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>";

但这给了我错误：“意外数字”。如果有人可以提供一些帮助，将不胜感激！

Answer 1

您必须注意引号 (")，您必须在 HTML 字符串中使用与分隔字符串本身不同的引号。

相关问题：Replace double quote in javascript variable string

代替：

var contentString = "<table width="100%" border="1">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td rowspan="2">&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>";

一种选择是混合使用单引号和双引号，并且不要将字符串拆分为多行：

var contentString = "<table width='100%' border='1'><tr><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td>&nbsp;</td><td rowspan='2'>&nbsp;</td></tr><tr><td>&nbsp;</td></tr></table>";

proof of concept fiddle

代码 sn-p：

var geocoder;
var map;

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var contentString = "<table width='100%' border='1'><tr><td>&nbsp;A</td><td>&nbsp;B</td></tr><tr><td>&nbsp;E</td><td rowspan='2'>&nbsp;C</td></tr><tr><td>&nbsp;D</td></tr></table>";
  var infowindow = new google.maps.InfoWindow({
    content: contentString,
    position: map.getCenter()
  });
  infowindow.open(map);
}
google.maps.event.addDomListener(window, "load", initialize);

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>