如何在我的场景中使某些变量成为全局变量？

Question

我正在使用 Google 地图 JavaScript API 和 HTML 表格根据用户输入的纬度和经度坐标在地图上添加标记进入表格。以下是我在HTML页面中的正文代码：

<body>
    <div id="mainForm">
        <form id="mainForm" name="mainForm" method="get">

        Latitude: <input type="text" id="latitude" name="latitude">
        Longitude: <input type="text" id="longitude" name="longitude">
        <input type="submit" name="submit" onClick="results(this.form)">

        </form>
    </div>

    <!--The div element for the map -->
    <div id="map">
    <script>
        var latitudeNew;
        var longitudeNew;
        function results (form) {
            latitudeNew = parseFloat(form.latitude.value);
            longitudeNew = parseFloat(form.longitude.value);
            console.log(latitudeNew);
        }
// Initialize and add the map
function initMap() {
  // The location of the markers
  var UScenter = {lat: 38.1, lng: -96.8};
  var formInput = {lat: latitudeNew, lng: longitudeNew};
  // The map, centered on the U.S.
  var map = new google.maps.Map(
      document.getElementById('map'), {
          zoom: 5,
          center: UScenter,
          disableDefaultUI: true,
          zoomControl: true
      });
  map.setOptions({ minZoom: 3, maxZoom: 20 });

  var contentString = '<div id="content">'+
      '<div id="siteNotice">'+
      '</div>'+
      '<h1 id="firstHeading" class="firstHeading">Hello</h1>'+
      '<div id="bodyContent">'+
      '<p>Name</p>'+
      '</div>'+
      '</div>';

  var infowindow = new google.maps.InfoWindow({
    content: contentString
  });

  // The markers
  var marker = new google.maps.Marker({position: formInput, map: map});
  marker.addListener('click', function() {
    infowindow.open(map, marker);
  });
}
    </script>

    <script async defer
    src="https://maps.googleapis.com/maps/api/js?&callback=initMap">
    </script>
    </div>
  </body>

正如您通过查看代码可能已经知道的那样，我的表单在提交时调用了函数 results，该函数定义了变量 latitudeNew 和 longitudeNew。这些变量后来在函数 initMap 中使用，用变量 formInput 定义标记的位置。我知道这个问题与我正在创建的单独的全局变量和局部变量有关，但是我试图解决这个问题的各种解决方案对我都不起作用，例如将变量定义为 window.latitude/longitude并在函数之外定义变量。

所以我的具体问题是如何定义 latitudeNew 和 longitudeNew 变量以及将它们放在哪里以便我可以获得用户在表单中插入的输入值Google 地图上的标记正确吗？

Answer 1

两件事：

地图由 initMap 初始化，目前是 API 的回调（因此它在 API 完成加载时运行，用户可以点击按钮之前).从 API 中删除 &callback=initMap 包括：

<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY">

表单post正在重新加载页面，破坏地图，在<input type="submit">标签的onclick函数中添加return false;：

<input type="submit" name="submit" onClick="results(this.form); return false;">

工作代码片段：*

html,
body,
#map {
  height: 100%;
  width" 100%;
 margin: 0;
  padding: 0;
}

<div id="mainForm">
  <form id="mainForm" name="mainForm" method="get">

    Latitude: <input type="text" id="latitude" name="latitude" value="38.1"> Longitude: <input type="text" id="longitude" name="longitude" value="-96.8">
    <input type="submit" name="submit" onClick="results(this.form); return false;">

  </form>
</div>

<!--The div element for the map -->
<div id="map">
  <script>
    var latitudeNew;
    var longitudeNew;

    function results(form) {
      latitudeNew = parseFloat(form.latitude.value);
      longitudeNew = parseFloat(form.longitude.value);
      console.log(latitudeNew);
      initMap();
    }
    // Initialize and add the map
    function initMap() {
      // The location of the markers
      var UScenter = {
        lat: 38.1,
        lng: -96.8
      };
      var formInput = {
        lat: latitudeNew,
        lng: longitudeNew
      };
      var college = "<?php echo $college ?>;"
      // The map, centered on the U.S.
      var map = new google.maps.Map(
        document.getElementById('map'), {
          zoom: 5,
          center: UScenter,
          disableDefaultUI: true,
          zoomControl: true
        });
      map.setOptions({
        minZoom: 3,
        maxZoom: 20
      });

      var contentString = '<div id="content">' +
        '<div id="siteNotice">' +
        '</div>' +
        '<h1 id="firstHeading" class="firstHeading">University of California, San Diego</h1>' +
        '<div id="bodyContent">' +
        '<p>Devin Provence</p>' +
        '</div>' +
        '</div>';

      var infowindow = new google.maps.InfoWindow({
        content: contentString
      });

      // The markers
      var marker = new google.maps.Marker({
        position: formInput,
        map: map
      });
      marker.addListener('click', function() {
        infowindow.open(map, marker);
      });
    }
  </script>

  <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk">
  </script>
</div>

如何在我的场景中使某些变量成为全局变量？

How do I make certain variables global in my scenario?

javascript

variables

google-maps

scope

global-variables