jVectorMaps 图像标记

Question

我知道有人问过这个问题，但操作员没有提供任何代码，显然我无法编辑他的答案，所以我将开始一个新的。我的 objective 是用自定义的 drop-pin 标记替换该点，我最终会对其进行一些其他操作。因此，作为一个 kicker，必须以某种方式（也许和 id）识别此类操作，以便我可以从 jQuery、CSS 或 javascript 调用它并给它一些用处。

背景：

我从 jVectorMaps 中提取了宾夕法尼亚州的地图，并从解释如何使用此 link marker-icons 中的标记图像的部分提取了代码。

这是原码:

$(function(){
   var plants = [
   {name: 'KKG', coords: [49.9841308, 10.1846373], status: 'activeUntil2018'},
   {name: 'KKK', coords: [53.4104656, 10.4091597], status: 'closed'},
   {name: 'KWG', coords: [52.0348748, 9.4097793], status: 'activeUntil2022'},
   {name: 'KBR', coords: [53.850666, 9.3457603], status: 'closed', offsets: [0, 5]}
];

new jvm.Map({
   container: $('#map'),
   map: 'de_merc',
   markers: plants.map(function(h){ return {name: h.name, latLng: h.coords} }),
   labels: {
      markers: {
        render: function(index){
          return plants[index].name;
        },
        offsets: function(index){
          var offset = plants[index]['offsets'] || [0, 0];

          return [offset[0] - 7, offset[1] + 3];
        }
      }
   },
   series: {
     markers: [{
       attribute: 'image',
       scale: {
         'closed': '/img/icon-np-3.png',
         'activeUntil2018': '/img/icon-np-2.png',
         'activeUntil2022': '/img/icon-np-1.png'
       },
       values: plants.reduce(function(p, c, i){ p[i] = c.status; return p }, {}),
       legend: {
         horizontal: true,
         title: 'Nuclear power station status',
         labelRender: function(v){
           return {
           closed: 'Closed',
           activeUntil2018: 'Scheduled for shut down<br> before 2018',
           activeUntil2022: 'Scheduled for shut down<br> before 2022'
         }[v];
        }
      }
    }]
   }
  });
});

这是我的版本，它显示地图，它显示位置，但只是一个点，而不是标记。（见下面的截图）p.s。我不关心传奇。我正在为此做其他事情。

我的代码：

//------------- Vector maps -------------//
     var prison = [
       {name: 'Albion', coords: [41.890611, -80.366454], status: 'active', offsets: [0, 2]}
];


$('#pa-map').vectorMap({
    map: 'us-pa_lcc_en',
    scaleColors: ['#f7f9fe', '#29b6d8'],
    normalizeFunction: 'polynomial',
    hoverOpacity: 0.7,
    hoverColor: false,
    backgroundColor: '#fff',
    regionStyle:{
        initial: {
            fill: '#dde1e7',
            "fill-opacity": 1,
            stroke: '#f7f9fe',
            "stroke-width": 0,
            "stroke-opacity": 0
        },
        hover: {
            "fill-opacity": 0.8
        },
        selected: {
            fill: 'yellow'
        }
    },
    markers: prison.map(function(h){ return {name: h.name, latLng: h.coords} }),
    labels: {
        markers: {
          render: function(index){
            return prison[index].name;
          },
          offsets: function(index){
            var offset = prison[index]['offsets'] || [0, 0];

            return [offset[0] - 7, offset[1] + 3];
          }
        }
    },
    series: {
      markers: [{
        attribute: 'image',
        scale: { 'active': '/img/map-marker-icon.png'},
        values: prison.reduce(function(p, c, i){ p[i] = c.status; return p }, {}),
      }]
    }
});

我的HTML:

<div id="pa-map" style="width: 100%; height: 470px"></div>

我的CSS：

无关紧要。稍后我会相应地设计。

提前致谢！

Answer 1

将点更改为自定义标记 DEMO
如果您在那里阅读源代码，他们可以选择在 jvm.Map.defaultParam 和 markerStyle[=33= 中初始化 markerStyle ] 你可以将它定义为图像或填充（这里使用开关大小写）我认为在 jvm.Legend.prototype.render

他们还有一些活动

jvm.Map.apiEvents = { onRegionTipShow: "regionTipShow", onRegionOver: "regionOver", onRegionOut: "regionOut", onRegionClick: "regionClick", onRegionSelected: "regionSelected", onMarkerTipShow: "markerTipShow", onMarkerOver: "markerOver", onMarkerOut: "markerOut", onMarkerClick: "markerClick", onMarkerSelected: "markerSelected", onViewportChange: "viewportChange" }

所以这里的代码 UPDATE 你也可以将你的函数附加到 onMarkerClick 选项

function doWhatever(event, code, obj) { alert("Hello"); console.log(event); } var prison = [{ name: 'Albion', coords: [41.890611, -80.366454], status: 'active', offsets: [0, 2] }]; var ab = $('#pa-map').vectorMap({ map: 'us-pa_lcc_en', scaleColors: ['#f7f9fe', '#29b6d8'], normalizeFunction: 'polynomial', hoverOpacity: 0.7, hoverColor: false, backgroundColor: '#fff', regionStyle: { initial: { fill: '#dde1e7', "fill-opacity": 1, stroke: '#f7f9fe', "stroke-width": 0, "stroke-opacity": 0 }, hover: { "fill-opacity": 0.8 }, selected: { fill: 'yellow' } }, markers: prison.map(function(h) { return { name: h.name, latLng: h.coords } }), labels: { markers: { render: function(index) { return prison[index].name; }, offsets: function(index) { var offset = prison[index]['offsets'] || [0, 0]; return [offset[0] - 7, offset[1] + 3]; } } }, markersSelectable: true, markerStyle: { initial: { image: "http://jvectormap.com/img/icon-np-2.png", }, }, onMarkerClick: function(event, code) { doWhatever(event, code, this); } });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <link href="http://jvectormap.com/css/jquery-jvectormap-2.0.3.css" rel="stylesheet" /> <script src="http://jvectormap.com/js/jquery-jvectormap-2.0.3.min.js"></script> <script src="https://raw.githubusercontent.com/bjornd/jvectormap/master/tests/assets/us/jquery-jvectormap-data-us-pa-lcc-en.js"></script> <div id="pa-map" style="width: 100%; height: 470px"></div>

jVectorMaps 图像标记

jVectorMaps image markers

javascript

jvectormap