1

我正在做一个天气/地图网络应用程序。根据用户的纬度和经度，它将为您提供地图（谷歌地图）上的天气和位置。我看到在 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>
4

1 回答 1

2

如果我理解正确，您可以将您的地图声明为全局变量并从您的脚本中访问它。我打电话给这里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

于 2017-02-11T04:18:13.543 回答