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>"（如下面的代码段所示）会阻止嵌入式脚本运行。

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

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是否不同？

UPDATE2：并非所有标记/多边形在“IFPRI Ref2”行中都具有值。如果我在this version of your map

上点击孟加拉国，它就有效

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

2 个答案: