[我正在尝试将天气控件从http://www.weather.com/services/oap/weather-widgets.html嵌入到Google地图的信息窗口中，这样，当我单击标记时，天气控件将在信息窗口中打开。
用于嵌入天气小部件的代码如下（对于加利福尼亚州的旧金山）：
并且当我将其放入HTML时效果很好：
<html>
<head>
</head>
<body>
<div style="width:270px;height:175px;border:1px solid blue;padding:10px">
<script type="text/javascript" src="http://voap.weather.com/weather/oap/USCA0987?template=GENXH&par=3000000007&unit=0&key=twciweatherwidget"></script>
</div>
</body>
</html>但是，当我尝试在下面的代码中使用它时，该代码应该在Google地图的InfoWindow中显示该小部件，因此它不起作用：
<html><head>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript">
function initialize() {
var cpoint = new google.maps.LatLng(37.770728 ,-122.458199 );
var mapOptions = {
zoom: 4,
center: cpoint,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
var infowindow = new google.maps.InfoWindow();
var info1 = '<div style="width:270px;height:175px;border:1px solid blue;padding:10px"><script type="text/javascript" src="http://voap.weather.com/weather/oap/USCA0987?template=GENXH&par=3000000007&unit=0&key=twciweatherwidget"></script></div>';
var point1 = new google.maps.LatLng(37.770728 ,-122.458199 );
var marker1 = new google.maps.Marker({
position: point1 ,
map: map,
title: "Click here for details"
});
google.maps.event.addListener(marker1 , "click", function() {
infowindow.setContent(info1 );
infowindow.open(map,marker1 );
});
}google.maps.event.addDomListener(window, "load", initialize);
</script>
</head><body>
<div id="map-canvas" style="width:750px; height:450px; border: 2px solid #3872ac;"></div>
</body></html>[我要做的就是将那个div放入info1 Javascript变量中。我不确定我做错了什么，还是InfoWindow不允许这样做。
此小部件利用document.write注入样式和标记。
[write不能在没有加载文档后出现不良副作用的情况下使用，但在加载文档后会打开信息窗口。
可能的解决方法：
使用（隐藏）iframe。到隐藏的iframe中，加载小部件以及iframe已加载的时间
//an array with the details, I guess ou want more than 1 marker
//[locationname, latitude, longitude, widget-url]
infos = [
['San Francisco', 37.770728, -122.458199, 'http://voap.weather.com/weather/oap/USCA0987?template=GENXH&par=3000000007&unit=0&key=twciweatherwidget'],
['Atlanta', 33.7489954, -84.3879824, 'http://voap.weather.com/weather/oap/USGA0028?template=GENXV&par=3000000007&unit=0&key=twciweatherwidget']
]
function initialize() {
var mapOptions = {
zoom: 3,
center: new google.maps.LatLng(44.3396955, -100.509996),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
//create the iframe
var infoframe = document.createElement('iframe');
document.body.appendChild(infoframe);
var infowindow = new google.maps.InfoWindow();
//iterate over the infos-array
for (var i = 0; i < infos.length; ++i) {
//create the marker
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(infos[i][1], infos[i][2]),
title: "Click here for the weather of \n" + infos[i][0],
script: infos[i][3]
});
//click-listener
google.maps.event.addListener(marker, 'click', function () {
var that = this;
infowindow.close();
//when the widget for this marker hasn't been parsed yet
if (!this.get('content')) {
//the window-object of the iframe
var win = infoframe.contentWindow;
google.maps.event.clearListeners(win, 'load');
//open document and write the widget-code
win.document.open();
win.document.write('\<script src="' + this.get('script') + '">\<\/script>');
//observe the load-event of the iframe
//will fire when widget is available
google.maps.event.addDomListener(win, 'load', function () {
//store style and widget-node as marker-properties
that.set('style', document.adoptNode(win.document.getElementsByTagName('style')[0]));
that.get('style').id = 'weatherstyle';
if (!document.getElementById('weatherstyle')) {
var weatherstyle = document.createElement('style');
weatherstyle.id = 'weatherstyle';
document.getElementsByTagName('head')[0].appendChild(weatherstyle);
}
that.set('content', document.adoptNode(win.document.body.firstChild));
//trigger the marker-click
//this will open the infowindow now
google.maps.event.trigger(that, 'click')
});
win.document.close();
}
//widget has been parsed, set infowindow-content and open it
else {
//inject widget-style into document
document.getElementById('weatherstyle').parentNode.replaceChild(that.get('style'), document.getElementById('weatherstyle'))
infowindow.setContent(that.get('content'));
infowindow.open(that.getMap(), that);
}
});
}
}
google.maps.event.addDomListener(window, "load", initialize);
我终于能够使用iframe广告代码弄清楚这一点。请参阅我的博客文章Weather forecasting with SAS-generated Google maps。
首先，我创建了天气迷你页面：
%macro create_widgets;
%let dsid = %sysfunc(open(places));
%let num = %sysfunc(attrn(&dsid,nlobs));
%let rc = %sysfunc(close(&dsid));
%do j=1 %to #
data _null_;
p = &j;
set places point=p;
file "&proj_path\widgets\accuweather_com_widget&j..html";
put
'<html><body>' /
'<a href="http://www.accuweather.com/en/' loc +(-1) '/' loczip +(-1) '/current-weather/' lockey +(-1) '" class="aw-widget-legal"></a>' /
'<div id="' dataid +(-1) '" class="aw-widget-current" data-locationkey="' lockey +(-1) '" data-unit="f" data-language="en-us" data-useip="false" data-uid="' dataid +(-1) '" data-editlocation="false"></div>' /
'<script type="text/javascript" src="http://oap.accuweather.com/launch.js"></script>' /
'</body></html>'
;
stop;
run;
%end;
%mend create_widgets;
%create_widgets;
然后，我为Google地图定义了一个InfoWindow和一个自定义标记：
put
'var info' i '= ''<iframe style="width:400px;height:360px;" src="widgets/accuweather_com_widget' i +(-1) '.html">'';' /
'var point' i '= new google.maps.LatLng(' lat ',' lng ');' /
'var marker' i '= new google.maps.Marker({' /
'position: point' i ',' /
'icon: ''images/weather-icon.gif'',' /
'map: map,' /
'title: "Click here for weather details"' /
'});' /
. . .
代码的其余部分与所有其他Google Map with SAS系列相同。