（Javascript）将代码笔中的变量从JS窗口传递到HTML<；脚本></脚本>；模板_Javascript_Css_Google Maps_Codepen

（Javascript）将代码笔中的变量从JS窗口传递到HTML<；脚本></脚本>；模板

javascript css google-maps

（Javascript）将代码笔中的变量从JS窗口传递到HTML<；脚本></脚本>；模板,javascript,css,google-maps,codepen,Javascript,Css,Google Maps,Codepen,我正在做一个天气/地图web应用程序。根据用户的纬度和经度，它将在地图（谷歌地图）上显示天气和位置。我发现在Codepen中使用Google Maps API时，不能将其放在Js窗口中，而必须将其放在HTML模板中的标记之间这很好，但问题是我需要从JS窗口中传递纬度和经度变量，以便搜索位置。我该怎么做？代码笔有时会有点棘手希望我说的有道理，下面是代码笔：谢谢只是把一个脚本放在下面，因为我需要包含代码，请查看Codepen链接 <html> <head> &l

我正在做一个天气/地图web应用程序。根据用户的纬度和经度，它将在地图（谷歌地图）上显示天气和位置。我发现在Codepen中使用Google Maps API时，不能将其放在Js窗口中，而必须将其放在HTML模板中的

标记之间

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

希望我说的有道理，下面是代码笔：

谢谢

只是把一个脚本放在下面，因为我需要包含代码，请查看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>


天气应用程序






你来了！
函数initMap（）{
var uluru={lat:-25.363，液化天然气：131.044}；
var map=new google.maps.map（document.getElementById（'map'）{
缩放：4，
中心：乌卢鲁
});
var marker=new google.maps.marker({
职位：乌卢鲁，
地图：地图
});
}

如果我理解正确，您可以将map声明为全局变量，并从脚本中访问它。我在这里叫了

myMap

诸如此类：

在您的

标签中：

  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());

工作代码：