gpt4 book ai didi

javascript - (Javascript) 将 Codepen 中的变量从 JS 窗口传递到 HTML <script></script> 模板

转载 作者:太空宇宙 更新时间:2023-11-04 09:10:21 25 4
gpt4 key购买 nike

我正在做一个天气/ map 网络应用程序。根据用户的纬度和经度,它将为您提供 map (Google map )上的天气和位置。我发现在 Codepen 中使用 Google Maps API 时,您不能将它放在 Js 窗口中,而必须将它放在 <script></script> 之间的 HTML 模板中。标签。

这很好,但问题是我需要从那里的 JS 窗口传递纬度和经度变量,以便我可以搜索位置。我该怎么做? Codepen 有时会有点棘手。

希望我说得有道理,这是 Codepen:

https://codepen.io/tadm123/pen/OWojPx

谢谢

只是在下面放一个脚本,因为我需要包含代码,请参阅 Codepen 链接。

<html>
<head>
<title>Weather App</title>
</head>

<body>
<div>
<div class = "container-fluid" id="box">
<p id="country"></p>
<p id="name"></p>
<p id="weather"></p>
<p id="celsius"></p>
<p id="fahrenheit"></p>
<p id="humidity"></p>

<img src="aa" alt="Weather icon">

</div>


<h3>You are here!</h3>
<div id="map"></div>
</div>


<script>
function initMap() {
var uluru = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCB4SQpFr1XLzTuYlQF_KTBixLCUQoRcOY&callback=initMap">
</script>
</body>

</html>

最佳答案

如果我没理解错的话,您只需将您的 map 声明为一个全局变量,然后从您的脚本中访问它。我在这里打电话myMap .

类似的东西:

在你的<script>标签:

  var myMap = null;

function initMap() {

/* ... */

myMap = new google.maps.Map(
document.getElementById('map'),
{
zoom: 4,
center: uluru
}
);
}

然后,在您的 AJAX 回调中:

 /* add marker */
var marker = new google.maps.Marker({
position: {
lat: lat,
lng: long
},
map: myMap
});

/* center in marker */
myMap.panTo(marker.getPosition());

工作代码:https://codepen.io/mrlew/pen/MJzqzZ

关于javascript - (Javascript) 将 Codepen 中的变量从 JS 窗口传递到 HTML &lt;script&gt;&lt;/script&gt; 模板,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42171984/

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