gpt4 book ai didi

javascript - 将天气小部件嵌入到 Google map 的信息窗口中

转载 作者:行者123 更新时间:2023-12-03 11:50:07 25 4
gpt4 key购买 nike

我正在尝试嵌入 http://www.weather.com/services/oap/weather-widgets.html 中的天气小部件进入 Google map 的信息窗口,这样当我单击标记时,天气小部件就会在信息窗口中打开。

嵌入天气小部件的代码如下(针对加利福尼亚州旧金山):

当我将其放入 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 map 上的 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不允许这样做。

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com