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

Posted 2023-03-28

【中文标题】在下拉菜单中分组地图国家

【英文标题】：Group map countries in drop down menu

【发布时间】：2020-04-04 10:06:45

【问题描述】：

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

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】：

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

【讨论】：

非常感谢施里！我一回家就试试！我还有很多其他国家要输入，如果我添加其他国家，这会起作用吗？

你是明星！今晚我会告诉你进展如何！