下拉菜单中的组地图国家/地区

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").val(function(index, val) {
  $(this).siblings('[value="'+ val +'"]').remove();
});

将从下拉选项中删除所有重复的国家/地区。