jVectorMapページ上のアクティブなマーカーload

Question

私はマーカーアイコンのための領域とカスタムイメージ用のカスタムカラーを持っています。ホバーして、マーカーをクリックすると、私は好きなように変化しますが...マップをロードした後にマーカーを1つ作成すると、解決策が見つかりません。 jqueryでマーカーアイコンをクリックしようとしていましたが、要素属性で見つかったクリックは（コンソールログに基づいて）機能しましたが、マップ上で何も変わりませんでした。

https://jsfiddle.net/6ss2eahr/7/

$(document).ready(function() { 
var markers = [ 
     { latLng: [54.5039433, 18.3233958], name: 'Gdynia', region: 'PL-PM' }, 
     { latLng: [51.7472675, 18.0070145], name: 'Kalisz', region: 'PL-WP' }, 
     { latLng: [50.2138079, 18.8671087], name: 'Katowice', region: 'PL-SL' }, 
     { latLng: [50.8541274, 20.5456014], name: 'Kielce', region: 'PL-SK' } 
    ]; 

var last_poi; 

$('#map-pl').vectorMap({ 
    map: 'pl_merc', 
    backgroundColor: '#fff', 
    zoomButtons: false, 
    zoomOnScroll: false, 
    regionsSelectable: false, 
    regionsSelectableOne: true, 
    markersSelectable: true, 
    markersSelectableOne: true, 
    markers: markers, 
    markerStyle: { 
     initial: { 
      image: 'https://www.royalparks.org.uk/_media/images/map_icons/find-my-location-icon.png' 
     }, 
     hover: { 
      image: 'http://tiltedkilt.com/wp-content/themes/base/library/images/pin-small-icon.png', 
      cursor: 'pointer' 
     }, 
     selected: { 
      image: 'http://tiltedkilt.com/wp-content/themes/base/library/images/pin-small-icon.png' 
     }, 
     selectedHover: { 
      image: 'http://tiltedkilt.com/wp-content/themes/base/library/images/pin-small-icon.png' 
     } 
    }, 
    regionStyle: { 
     hover: { fill: '#fdefc9' }, 
     initial: { stroke: "white", "stroke-width": 1, fill: "#fcf8ed" }, 
     selected: { fill: "#ffcc39" } 
    }, 
    onMarkerClick: function (event, id) { 
     var mapObject = $('#map-pl').vectorMap('get', 'mapObject'); 
     mapObject.clearSelectedRegions(); 
     mapObject.setSelectedRegions(markers[id].region); 
     last_poi = id; 
    }, 
    onMarkerOver: function (event, id) { 
     var mapObject = $('#map-pl').vectorMap('get', 'mapObject'); 
     mapObject.clearSelectedRegions(); 
     if (last_poi) { 
      mapObject.setSelectedRegions(markers[last_poi].region); 
     } 
     mapObject.setSelectedRegions(markers[id].region); 
    }, 
    onMarkerOut: function (event, id) { 
     var mapObject = $('#map-pl').vectorMap('get', 'mapObject'); 
     mapObject.clearSelectedRegions(); 
     if (last_poi) { 
      mapObject.setSelectedRegions(markers[last_poi].region); 
     } 
    }, 
    onRegionTipShow: function (e, label, code) { 
     e.preventDefault(); 
    } 
}); 

}）。

Answer 1

すべての機能getSelectedMarkers、setSelectedRegions、その溶液を動的に1または複数のマーカーと対応する領域を選択するのはとても簡単ですのでように、値の配列を扱うことができます。

var mapObject = $('#map-pl').vectorMap('get', 'mapObject'); 
// select Gdynia by index 
var selectedMarkers = [0], 
    selectedRegions = []; 
selectedMarkers.forEach(function(item) { 
    selectedRegions.push(mapObject.markers[item].config.region); 
}); 
mapObject.setSelectedMarkers(selectedMarkers); 
mapObject.setSelectedRegions(selectedRegions); 

あなたが全体を削除することができますlast_poiを使用してマーカーインデックスを追跡し、onMarkerOutの選択を解除し、上記の関数に置き換えて​​から直接Regionを取得するロジック。