我正在做一个天气/地图网络应用程序。根据用户的纬度和经度,您可以在地图(Google地图)上获得天气和位置。我看到在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>
最佳答案
如果我理解正确,则可以将地图声明为全局变量,并可以通过脚本对其进行访问。我在这里叫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 <script> </script>模板中,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/42171984/