Проблема при назначении функции «изменить позицию» маркерам GoogleMaps (через пользовательский интерфейс) в чистом JavaScript и HTML - PullRequest
Новая
       4

Проблема при назначении функции «изменить позицию» маркерам GoogleMaps (через пользовательский интерфейс) в чистом JavaScript и HTML

1 голос
/ 24 марта 2019

Я пытаюсь создать простое веб-приложение, в котором пользователь может добавлять маркеры в GoogleMap либо записывая значения LatLong в полях ввода, либо нажимая кнопку «выбрать позицию», когда маркер отскакивает и перетаскивается.Сказав ОК, маркер должен перестать подпрыгивать и быть размещенным на карте.Этот шаг, кажется, работает нормально.

Теперь возникает актуальная проблема.Каждый раз, когда я нажимаю на маркер, модальное окно редактирования (какое-то всплывающее окно) отображает, где значения LatLong представлены в полях ввода.И затем есть кнопка, чтобы изменить положение: идея состоит в том, что этот конкретный маркер должен быть прыгающим, чтобы указать пользователю «что я здесь», и я установил для свойства draggable значение true.Когда пользователь теперь нажимает кнопку «ОК», боуксинг должен прекратиться, и значения должны быть обновлены в полях ввода модального окна для LatLong.

Однако всякий раз, когда я нажимаю кнопку в модальном редакторе, чтобы изменить положение, внезапно все маркеры отскакивают.

Вот мой HTML: 

  <head>
    <link rel="stylesheet" href="css.css">
    <script type="text/javascript" src="js.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBrVCIT52nTZHM9_Pvw_pQWWxAELWbYkGY&callback=initMap"async defer></script>
  </head>

  <body>
    <button id="okBtn" type="button" name="button" style="display:none;">OK</button>
    <button id="cancelBtn" type="button" name="button" style="display:none;">Cancel</button>

    <button id="addMarkerBtn" type="button" name="button" onclick="displayModal('addMarkerModal')">Add Marker</button>
    <div id="addMarkerModal" class="modal">
      <div class="modal-content">
        <span  id="close" onclick="hideModals()">&times;</span>
        <p>Choose position either by writing in the TextBoxes or by clicking 'choose position'.</p>
        <input id="addMarkerModalLatInput" type="number" step="any" placeholder="Lat">
        <input id="addMarkerModalLngInput" type="number" step="any" placeholder="Long">
        <button id="addMarkerModalChoosePositionBtn" type="button" onclick="choosePosition()">Choose position</button>
        <button id="addMarkerModalSaveBtn" type="button" onclick="saveMarker()">Save</button>
      </div>
    </div>

    <div id="editMarkerModal" class="modal">
      <div class="modal-content">
        <span  id="close" onclick="hideModals()">&times;</span>
        <input id="editMarkerModalLatInput" type="number" step="any">
        <input id="editMarkerModalLngInput" type="number" step="any">
        <button id="editMarkerModalChangePostionBtn" type="button">Change position</button>
        <button id="editMarkerModalSaveBtn" type="button" onclick="saveMarker()">Speichern</button>
      </div>
    </div>

    <div id="map"></div>

  </body>
</html>

А вот и файл JavaScript (я знаю, что не следует публиковать целый файл, но вы можете быстро скопировать пасту и попробовать ее самостоятельно, извинитедля этого): 

var map;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 48.210033, lng: 16.363449},
    zoom: 3
  });
}


/*  * Saving all html elements in variables  */
var okBtn;
var cancelBtn;
var addMarkerBtn;
var addMarkerModalLatInput;
var addMarkerModalLngInput;
var addMarkerModalChoosePositionBtn;
var addMarkerModalSaveBtn;
var editMarkerModalLatInput;
var editMarkerModalLngInput;
var editMarkerModalChangePostionBtn;
var editMarkerModalSaveBtn;

window.onload = function() {
   okBtn = document.getElementById('okBtn');
   cancelBtn = document.getElementById('cancelBtn');
   addMarkerBtn = document.getElementById('addMarkerBtn');
   addMarkerModalLatInput = document.getElementById('addMarkerModalLatInput');
   addMarkerModalLngInput = document.getElementById('addMarkerModalLngInput');
   addMarkerModalChoosePositionBtn = document.getElementById('addMarkerModalChoosePositionBtn');
   addMarkerModalSaveBtn = document.getElementById('addMarkerModalSaveBtn');
   editMarkerModalLatInput = document.getElementById('editMarkerModalLatInput');
   editMarkerModalLngInput = document.getElementById('editMarkerModalLngInput');
   editMarkerModalChangePostionBtn = document.getElementById('editMarkerModalChangePostionBtn');
   editMarkerModalSaveBtn = document.getElementById('editMarkerModalSaveBtn');
}

/*
places a Marker at position and defines onclick event
*/
function placeAndInitMarkerAtPosition(position) {
    var marker = new google.maps.Marker({
        position: position,
        map: map,
    });

    marker.addListener('click', function(e) {
      displayModal('editMarkerModal');
      editMarkerModalLatInput.value = marker.position.lat();
      editMarkerModalLngInput.value = marker.position.lng();
    });
    //editMarkerModalChangePostionBtn.removeEventListener('click', editMarkerModalBtnFunctionality(marker));
    editMarkerModalChangePostionBtn.addEventListener('click', function (e) {
      hideModals();
      marker.setAnimation(google.maps.Animation.BOUNCE);
      marker.setDraggable(true);
      hideAdd();

      okBtn.addEventListener('click', function(e) {
        marker.setAnimation(null);
        marker.setDraggable(false);
        displayModal('editMarkerModal');
        editMarkerModalLatInput.value = marker.position.lat();
        editMarkerModalLngInput.value = marker.position.lng();
      });

      cancelBtn.addEventListener('click', function(e) {
        hideModals();
        marker.setAnimation(null);
        marker.setDraggable(false);
        marker.position = {lat: oldLat, lng: oldLng};
        hideModals();
      });

      editMarkerModalSaveBtn.addEventListener('click', function(e) {
        hideModals();
        marker.setAnimation(null);
        marker.setDraggable(false);
        displayAdd();
      });

      editMarkerModalSaveBtn.addEventListener('click', function(e) {
        hideModals();
        marker.setAnimation(null);
        marker.setDraggable(false);
        displayAdd();
      });
    });

    map.panTo(marker.position);
    return marker;
}

/*
for temporary marker when choosing position of new marker != database
*/
function initChoosingMarker(position) {
  var marker = new google.maps.Marker({
      position: position,
      map: map,
      animation: google.maps.Animation.BOUNCE,
      draggable: true
  });

  return marker;
}

function choosePosition() {
  hideModals();

  var marker;
  if (checkAddMarkerModalInputs()) {
    marker = initChoosingMarker({lat: parseFloat(addMarkerModalLatInput.value), lng: parseFloat(addMarkerModalLngInput.value)});
  } else {
    marker = initChoosingMarker({lat: 45, lng: 10});
  }
  hideAdd();

  okBtn.addEventListener('click', function(e) {
    displayAdd();
    displayModal('addMarkerModal');
    addMarkerModalLatInput.value = marker.position.lat();
    addMarkerModalLngInput.value = marker.position.lng();
    marker.setMap(null);
  });

  cancelBtn.addEventListener('click', function(e) {
    displayAdd();
    marker.setMap(null);
  });
}

function displayAdd() {
  okBtn.style.display = 'none';
  cancelBtn.style.display = 'none';
  addMarkerBtn.disabled = false;
}

function hideAdd() {
  okBtn.style.display = 'block';
  cancelBtn.style.display = 'block';
  addMarkerBtn.disabled = true;
}

function saveMarker() {
  if (checkAddMarkerModalInputs()) {
    placeAndInitMarkerAtPosition({lat: parseFloat(addMarkerModalLatInput.value), lng: parseFloat(addMarkerModalLngInput.value)});
    hideModals();
  } else {
    alert('Input values should not be empty!');
  }
}

function checkAddMarkerModalInputs() {
  var lat = addMarkerModalLatInput.value;
  var lng = addMarkerModalLngInput.value;
  return lat!=null && lng!=null && lat.length!=0 && lng.length!=0;
}

function displayModal(idOfModal) {
  document.getElementById(idOfModal).style.display='block';
}

function hideModals() {
  var modals = document.getElementsByClassName('modal');
  for (var i = 0; i < modals.length; i++) {
    modals[i].style.display = "none";
  }
}

window.onclick = function(event) {
  var modals = document.getElementsByClassName('modal');
  for (var i = 0; i < modals.length; i++) {
    if (event.target == modals[i]) {
      modals[i].style.display = "none";
    }
  }
}

Также CSS, потому что иначе отображение модалов будет выглядеть брутто: 

/* Set the size of the div element that contains the map */
#map {
 height: 700px;  /* The height is 400 pixels */
 width: 100%;  /* The width is the width of the web page */
}

body {font-family: Arial, Helvetica, sans-serif;}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

/* The Close Button */
#close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

#close:hover,
#close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...