在自定义信息窗口中包含 <script> 元素

Question

我正在使用 Google Maps API 创建一个包含融合表内容的自定义 InfoWindow。我还想在 InfoWindow 中嵌入来自外部站点的内容，但无法使代码正常工作。来自外部站点的嵌入代码是：

    <link type="text/css" rel="stylesheet" media="all" href="http://www.foodsecurityportal.org/sites/all/modules/tic_countries/tic_countries_widget.css" />
<div class="web-widgets-inline" id="web_widgets_inline_country_news_36">
<script src="http://www.foodsecurityportal.org/country/widget/36"></script>
</div>

我正在尝试将其嵌入到我的 InfoWindow 中，如下所示，在我的融合表中引用了外部 URL 和 ID。我的问题是我无法让内联 </script> 元素发挥作用。将其完整包含为</script> 会阻止地图加载，同时尝试将其分解（例如"<"+"/script>"（如下面的sn-p）会阻止嵌入式脚本运行。

有什么想法吗？如果可能的话，请给出完整的解释，因为我是新手。非常感谢。

function initialize() {
  map = new google.maps.Map(document.getElementById('map_canvas'), {
    center: new google.maps.LatLng(10, 30),
    zoom: 2,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  layer = new google.maps.FusionTablesLayer(tableid);
  layer.setQuery("SELECT 'Country Geometry' FROM " + tableid);
  layer.setMap(map);

  layer2 = new google.maps.FusionTablesLayer(tableid2);
  layer2.setQuery("SELECT 'Site Location' FROM " + tableid2);
  layer2.setMap(map);


  google.maps.event.addListener(layer, 'click', function(e) {


e.infoWindowHtml = "<div class='googft-info-window' style='font-family: sans-serif; width: 500px; height: 300px; overflow: auto;'>"

e.infoWindowHtml += "<b>" + e.row['Site Name'].value + "</b><br />"

e.infoWindowHtml += "<img src=" + e.row['Image URL'].value + "><br />"

e.infoWindowHtml += "<link type=text/css rel=stylesheet media=all href=http://www.foodsecurityportal.org/sites/all/modules/tic_countries/tic_countries_widget.css />"

e.infoWindowHtml += "<div class=" + e.row['IFPRI Ref1'].value + " style='width: 95%; height: 150px; overflow: auto;'>"

e.infoWindowHtml += "<script src=" + e.row['IFPRI Ref2'].value + "type='text/javascript'><"+"/script>"

e.infoWindowHtml +=  "</div></div>"

  });

Answer 1

type-attribute前少了一个空格，src坏了。

但空间并不能解决问题。

我猜API 是使用innerHTML 来设置内容。因此脚本元素可以被注入到信息窗口中，但它不会执行。

您需要使用 DOM 方法来注入脚本并执行它，例如appendChild().

固定点击处理程序：

//add a click listener to the layer

  google.maps.event.addListener(layer, 'click', function(e) {

e.infoWindowHtml = "<div id='someID' class='googft-info-window' style='font-family: sans-serif; width: 500px; height: 300px; overflow: auto;'>\
                   <b>" + e.row['Site Name'].value + "</b><br />\
                   <img src=" + e.row['Image URL'].value + "><br />\
                   <link type=text/css rel=stylesheet media=all href=http://www.foodsecurityportal.org/sites/all/modules/tic_countries/tic_countries_widget.css />\
                   <div class=" + e.row['IFPRI Ref1'].value + " style='width: 95%; height: 150px; overflow: auto;'>\
                   </div></div>";

      //append the script to the body, it doesn't matter where you place it
        var script=document.createElement('script');
            script.setAttribute('src',e.row['IFPRI Ref2'].value);
            document.getElementsByTagName('body')[0].appendChild(script);

  });

Answer 2

看起来您在这一行中缺少“”：

e.infoWindowHtml += "<link type=text/css rel=stylesheet media=all href=http://www.foodsecurityportal.org/sites/all/modules/tic_countries/tic_countries_widget.css />"

应该是这样的：

e.infoWindowHtml += "<link type='text/css' rel=stylesheet media='all' href='http://www.foodsecurityportal.org/sites/all/modules/tic_countries/tic_countries_widget.css' />"

更新： 你说的是：

e.infoWindowHtml += "<script src=" + e.row['IFPRI Ref2'].value + "type='text/javascript'><"+"/script>"

不工作。为什么在 infoWindow 打开时需要包含它？为什么不把它作为页面的一部分（静态加载）？每个 infoWindow 的 src 是否不同？

更新2： 并非所有标记/多边形在“IFPRI Ref2”行中都有值。如果我在this version of your map 上点击孟加拉国，它会起作用