包括< script>自定义infowindow中的元素 [英] Including <script> elements in a custom infowindow
问题描述
我使用Google Maps API创建包含融合表内容的自定义InfoWindow。我也想在InfoWindow中嵌入来自外部网站的内容，但无法让代码正常工作。来自外部网站的嵌入代码是：
< link type =text / css =stylesheetmedia = allhref =http://www.foodsecurityportal.org/sites/all/modules/tic_countries/tic_countries_widget.css/>
< div class =web-widgets-inlineid =web_widgets_inline_country_news_36>
< script src =http://www.foodsecurityportal.org/country/widget/36>< / script>
< / div>
我试图将它嵌入到我的InfoWindow中，如下所示，其中引用了外部URL和ID融合表。我的问题是，我无法获得内联< / script> 元素的功能。在尝试分解地图时（例如<+
有什么建议吗？可能因为我是新手。非常感谢。
函数初始化（）{
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（SELECTCountry 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;宽度：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>
}）;
。
但是空间并不能解决问题。
我猜API使用的是innerHTML来设置因此脚本元素可以注入到infowindow中，但是它不会执行。
您需要使用DOM方法来注入脚本和执行它，例如 appendChild（）。
p>
//将点击侦听器添加到图层
google.maps.event.addListener（layer，'点击'，功能（e）{
e.infoWindowHtml =< div id ='someID'class ='googft-info-window 'style ='font-family：sans-serif;宽度：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 ='宽度：95％; height：150px; overflow：auto;'> \
< / div>< / div>;
//将脚本附加到正文，放在哪里并不重要它
var script = document.createElement（'script'）;
script.setAttribute（'src'，e.row ['IFPRI Ref2'] .value）;
document.getElementsByTagName（ 'body'）[0] .appendChild（script）;
}）;
I am using the Google Maps API to create a custom InfoWindow that contains fusion table content. I also want to embed content from an external site in the InfoWindow, but cannot get the code to work. The embed code from the external site is:
<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>
I am trying to embed it into my InfoWindow as follows, with the external URL and ID referenced in my fusion table. My problem is that I cannot get the inline </script> element to function. Including it in full as </script> prevents the map from loading at all, whilst trying to break it up (e.g "<"+"/script>" (as in the below snippet) prevents the embedded script from running.
Any ideas? Please give a full explanation if possible as I'm a novice. Many thanks.
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>"
});
There is a space missing before the type-attribute, the src is broken.
But the space wouldn't solve the problem.
I guess the API is using innerHTML to set the content. Therefore the script-element could be injected into the infowindow, but it doesn't execute.
You need to use a DOM-method to inject the script and execute it, e.g. appendChild() .
Fixed click-handler:
//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);
});
这篇关于包括< script>自定义infowindow中的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
