在下拉菜单中分组地图国家

Question

我正在创建一个带有一些标记的地图和一个按国家/地区选择它们的下拉菜单。许多标记都在同一个国家，所以我的下拉菜单最终可以多次选择同一个国家。 我正在尝试对每个国家/地区的标记进行分组，因此下拉菜单中每个国家/地区只有一次。 有谁知道我该如何解决这个问题？我尝试了很多东西，但我总是弄乱我的代码。 非常感谢！

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);
  }
}

Answer 1

追加后，您可以使用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>