我正在做一个天气/地图网络应用程序。根据用户的纬度和经度,您可以在地图(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/

10-13 01:04