Группа карт стран в выпадающем меню - PullRequest
Новая
       51

Группа карт стран в выпадающем меню

1 голос
/ 11 декабря 2019

Я создаю карту с некоторыми маркерами и выпадающим меню, чтобы выбрать их по стране. Многие маркеры находятся в одной и той же стране, поэтому в моем раскрывающемся меню несколько раз была опция для одной и той же страны. Я пытаюсь сгруппировать свои маркеры по странам, поэтому в выпадающем меню каждая страна указана только один раз. Кто-нибудь знает, как я могу решить это? Я перепробовал много вещей, но всегда заканчивал тем, что испортил свой код. Большое спасибо! 

var markers = [
  {
    "title": 'France',
    "lat": '43.583627',
    "lng": '3.814796 ',
    "description": '<div id="web-info"> <h6><a target="_blank" href="https://www.ipal-formation.com/">Ipal</a></h6><p>Artomatherapy and Essential Oils Training</p></div>',
    "zoom": '5'
  },
  {
    "title": 'France',
    "lat": '46.521448',
    "lng": '6.633112',
    "description": '<div id="web-info"> <h6><a target="_blank" href="http://www.ecole-era.ch/">Ecole Romande d\'Aromathérapie ERA</a></h6><p>Aromatherapy Course</p></div>',
    "zoom": '5'
  }];

function initMap() {
  var mapOptions = {
    center: {
      lat: 9.072264,
      lng: 7.491302
    },
    zoom: 2,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  var map = new google.maps.Map(document.getElementById("map"), mapOptions);
  var infowindow = new google.maps.InfoWindow();

  for (var i = 0; i < markers.length; i++) {
    var markersData = markers[i];
    var coords = new google.maps.LatLng(markersData.lat, markersData.lng);
    var marker = new google.maps.Marker({
      position: coords,
      map: map,
      title: markersData.title
    });

    //Added click listener
    (function (marker, markersData) {
      google.maps.event.addListener(marker, "click", function (e) {
        infowindow.setContent(markersData.description);
        infowindow.open(map, marker);
      });

      jQuery("#selectlocation").append('<option value="' + [markersData.lat, markersData.lng, markersData.zoom].join('|') + '">' + markersData.title + '</option>');
      jQuery(document).on('change', '#selectlocation', function () {
        var latlngzoom = jQuery(this).val().split('|');
        var newzoom = 1 * latlngzoom[2],
          newlat = 1 * latlngzoom[0],
          newlng = 1 * latlngzoom[1];
        map.setZoom(newzoom);
        map.setCenter({ lat: newlat, lng: newlng });
      });
    })(marker, markersData);
  }
}

1 Ответ

0 голосов
/ 11 декабря 2019

После добавления вы можете удалить дублирующееся название страны, используя val с siblings, как показано ниже. 

$("#selectlocation option").val(function(index, val) {
  $(this).siblings('[value="'+ val +'"]').remove();
});

Это удаляет все дублирующиеся страны из выпадающего меню.

Примечание. После добавления в раскрывающемся списке ваш параметр будет выглядеть следующим образом: 

 <option value="France" data-lat="'+ markersData.lat +'"> France </option>

Использовать параметр lat, lang и другие с данными.

Вы можете легко перехватить это значение наизменение выпадающего списка, как показано ниже: 

$('#selectlocation').find(':selected').data('lat');


var markers = [{
    "title": 'France',
    "lat": '43.583627',
    "lng": '3.814796 ',
    "description": '<div id="web-info"> <h6><a target="_blank" href="https://www.ipal-formation.com/">Ipal</a></h6><p>Artomatherapy and Essential Oils Training</p></div>',
    "zoom": '5'
  },
  {
    "title": 'Nepal',
    "lat": '44.583627',
    "lng": '3.814796 ',
    "description": '<div id="web-info"> <h6><a target="_blank" href="https://www.ipal-formation.com/">Ipal</a></h6><p>Artomatherapy and Essential Oils Training</p></div>',
    "zoom": '5'
  },
  {
    "title": 'Nepal',
    "lat": '43.583627',
    "lng": '3.814796 ',
    "description": '<div id="web-info"> <h6><a target="_blank" href="https://www.ipal-formation.com/">Ipal</a></h6><p>Artomatherapy and Essential Oils Training</p></div>',
    "zoom": '5'
  },
  {
    "title": 'France',
    "lat": '46.521448',
    "lng": '6.633112',
    "description": '<div id="web-info"> <h6><a target="_blank" href="http://www.ecole-era.ch/">Ecole Romande d\'Aromathérapie ERA</a></h6><p>Aromatherapy Course</p></div>',
    "zoom": '5'
  }
];
$.each(markers, function(index, value) {
  //console.log(value.lat);
  jQuery("#selectlocation").append('<option data-lat="' + value.lat + '" value="' + value.title + '">' + value.title + '</option>');
});
$("#selectlocation option").val(function(index, val) {
  $(this).siblings('[value="' + val + '"]').remove();
});
jQuery(document).on('change', '#selectlocation', function() {
  var lat = $(this).find(':selected').data('lat');
  console.log(lat);

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="selectlocation">

</select>
...