将天气小工具嵌入谷歌地图的信息窗口

Embedding weather widget into info window of Google map

本文关键字：谷歌地图 信息 信息窗 窗口 工具      更新时间：2023-09-26

我正在尝试从http://www.weather.com/services/oap/weather-widgets.html进入谷歌地图的信息窗口，这样当我点击一个标记时，天气小部件就会在信息窗口中打开。

嵌入天气小部件的代码如下（适用于加利福尼亚州旧金山）：

当我把它放进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>

然而，当我试图在下面的代码中使用它时，该代码本应在谷歌地图的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不允许这样做。

我终于能够使用iframe标记来解决这个问题。请参阅我的博客文章天气预报与SAS生成的谷歌地图。

首先，我创建了天气迷你页面：

%macro create_widgets;
  %let dsid = %sysfunc(open(places));
  %let num  = %sysfunc(attrn(&dsid,nlobs));
  %let rc   = %sysfunc(close(&dsid));
  %do j=1 %to &num;
    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;

然后我为谷歌地图定义了一个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"' /
   '});' /
   . . .

其余的代码与所有其他带有SAS的谷歌地图系列没有什么不同。

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

在加载文档后，write不能在没有可能的副作用的情况下使用，但信息窗口在加载文档之后打开。

可能的解决方法：

使用（隐藏的）iframe。将小部件加载到隐藏的iframe中，当iframe已加载时

  1. 将信息窗口的内容设置为表示小部件的节点
  2. 将为小部件创建的样式应用于当前文档
//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/

相关文章：