Question

我知道这些问题已经被问到，但操作系统没有提供任何代码，我显然无法编辑他的答案，因此我将开始一个新的问题。我的目标是用自定义的drop-pin标记替换点，我最终会为它做一些其他动作。所以作为一个踢球者，必须以某种方式识别这样的动作（也许和id），以便我可以从jQuery，CSS或javascript中调用它并给它一些用处。

背景：

我从jVectorMaps中提取了宾夕法尼亚州的地图，以及解释如何使用此链接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 ，对于 markerStyle ，您可以将其定义为图像或填充（在这里使用switch case）我想在 jvm.Legend.prototype.render

他们也有一些事件

Couldn't match type ‘String -> String’
                   with ‘ReaderT [Char] Data.Functor.Identity.Identity a’
    Expected type: Reader [Char] a
      Actual type: String -> String

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

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"
}

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);
  }
});

jVectorMaps图像标记

1 个答案: