Как сделать определенные переменные глобальными в моем сценарии? - PullRequest
Новая
       37

Как сделать определенные переменные глобальными в моем сценарии?

0 голосов
/ 09 апреля 2020

Я использую API Карт Google JavaScript и форму 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 и определение переменные вне функций.

Поэтому мой конкретный c вопрос заключается в том, как определить переменные latitudeNew и longitudeNew и где их разместить, чтобы я мог получить значение входных данных правильно ли пользователь вставляет в форму маркер на карте Google?

1 Ответ

0 голосов
/ 09 апреля 2020

Две вещи:

  1. карта инициализируется initMap, который в настоящее время является обратным вызовом для API (поэтому он запускается, когда API завершает загрузку, до того, как пользователь может нажать кнопку). ). Удалить &callback=initMap из API включают в себя: 
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY">

Сообщение формы перезагружает страницу, уничтожает карту, добавляет return false; к функции onclick в теге <input type="submit">: 
<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>
...