Question

我正在尝试将http://www.weather.com/services/oap/weather-widgets.html中的天气小工具嵌入到Google地图的信息窗口中，这样当我点击标记时，天气小工具就会在Infowindow中打开。

嵌入天气小工具的代码如下（对于San-Francisco，CA）：

当我把它放入HTML时它工作正常：

＆＃13;

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

＆＃13;

但是，当我尝试在以下代码中使用它时，该代码应该在Google地图上的InfoWindow中显示小部件，但它不起作用：

＆＃13;

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

＆＃13;

我所做的就是将div放入info1 Javascript变量中。我不确定我是否做错了，或者InfoWindow不允许这样做。

Answer 1

此小部件使用document.write来注入样式和标记。

加载文档后，

write无法使用，但不会产生不良副作用，但文档加载后会打开信息页。

可能的解决方法：

使用（隐藏）iframe。进入隐藏的iframe加载小部件以及何时加载iframe

将infowindow的内容设置为表示小部件的节点
将为窗口小部件创建的样式应用于当前文档

//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);

演示：http://jsfiddle.net/doktormolle/tvn4qtxL/

将天气小部件嵌入到Google地图的信息窗口中

1 个答案: