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

Question

我正在做一个 weather/map 网络应用程序。根据用户的纬度和经度，它将为您提供地图上的天气和位置（Google 地图）。我看到当在 Codepen 中使用 Google 地图 API 时，你不能将它放在 Js window 中，而是你必须将它放在 HTML 模板中 <script></script> 标签。

很好，但问题是我需要从 JS window 传递纬度和经度变量，以便我可以搜索位置。我该怎么做？ Codepen 有时会有点棘手。

希望我说得有道理，这是 Codepen：

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

谢谢

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

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

Answer 1

如果我没理解错的话，您只需将您的地图声明为一个全局变量，然后从您的脚本中访问它。我在这里打电话 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());

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

(Javascript) Passing variables in Codepen from JS window into HTML <script></script> template

javascript

css

google-maps

codepen

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