页面加载

Question

我有区域的自定义颜色和标记图标的自定义图像。徘徊，点击标记改变everytjing就像我想要的但是......如何制作一个标记，加载地图后标记，我无法找到解决方案。我一直在尝试使用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等都可以处理值数组，因此解决方案很容易动态选择一个或多个Marker和相应的Region：

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来自mapObject。