Question

我正在做天气/地图网络应用。根据用户的纬度和经度，它将为您提供地图上的天气和位置（谷歌地图）。我发现在Codepen中使用Google Maps API时，您无法将其放在Js窗口中，而是必须将其放在<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>标记之间的HTML模板中。

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

希望我有意义，这就是Codepen：

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

由于

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

$a_date = "2009-11-23";
echo date('Y-m-t',strtotime($a_date));

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窗口传递到HTML <script> </script>模板

1 个答案:

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