点击谷歌地图打开表格Javascript

Question

所以我正在使用谷歌地图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字符串中使用与你用来分隔字符串本身不同的引号。

相关问题：替换javascript变量字符串中的双引号

代替：

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>";

概念验证小提琴

代码片段：

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>