jquery - 如何使用传单和 jQuery Birdseye 在点击时突出显示标记

Question

我对传单非常陌生，尝试在 foursquare 上复制该功能，突出显示单击的标记，并在单击 map 或选择并突出显示另一个标记时将其重置为原始标记。

我正在使用 jQuery Birdseye ( http://ajb.github.io/jquery-birdseye/ ) 来学习并获得某种交互式 map 。我将编号标记图标更改为编号标记 Sprite 。 Sprite 工作正常，位置由引脚(0=蓝色，1=突出显示，蓝色，2=橙色，3=突出显示橙色)和内部的“状态”控制L.标记。我知道 new_marker 单击函数仅将目标标记设置为突出显示。尚未找到解决方案来重现 foursquare map 上的功能，以在单击时突出显示标记。请指出我正确的方向。

L.NumberedDivIcon = L.Icon.extend({
  options: {
    sprite:"images/mappin-sprite.png",
    number: '',
    iconSize: new L.Point(29, 39),
    iconAnchor: new L.Point(15, 37),
    gridSize: new L.Point(35, 45),
    popupAnchor: new L.Point(0, -33),
    shadowUrl:"images/mappin-shadow.png",
    shadowSize:new L.Point(29, 15),
    shadowAnchor:new L.Point(15, 10),
    state: ''
  },

  createIcon: function () {
    var div = document.createElement('div');
    div.style.backgroundImage="url("+this.options.sprite+")";
    div.className="leaflet-marker-icon";
    div.style.marginLeft=-this.options.iconAnchor.x+"px";
    div.style.marginTop=-this.options.iconAnchor.y+"px";
    var b=this.options.gridSize||this.iconSize;
    var c=this.options['number'] || '';
var cd=this.options['state'] || '';


    var d= this.options.gridSize.y+this.options.iconSize.y+cd;

div.style.backgroundPosition=-(c*b.x+(b.x-this.options.iconSize.x)/2)+"px "+-(d*b.y+(b.y-this.options.iconSize.y)/2)+"px";

    this._setIconStyles(div, 'icon');
    return div;
  },

  //you could change this to add a shadow like in the normal marker if you really wanted
  createShadow: function () {
    var a=this.options.shadowSize;
    var img = this._createImg(this.options['shadowUrl']);
    img.style.marginLeft=-this.options.shadowAnchor.x+"px";
    img.style.marginTop=-this.options.shadowAnchor.y+"px";
    img.style.width=a.x+"px",img.style.height=a.y+"px";
    img.className="leaflet-marker-icon";

    return img;
  }
});

标记代码 jQuery Birdseye

processResults = function(results) {
        var marker, _i, _len;
        settings.results_el.html('');
        for (_i = 0, _len = markers.length; _i < _len; _i++) {
          marker = markers[_i];
          map.removeLayer(marker);
        }
        if (results.length > 0) {

          return $(results).each(function(key, result) {
            var new_marker;

            if (result.women == true) {
            var pin = 2;
          }
          else
          {
            var pin = 0;
          }

            new_marker = L.marker(settings.response_params_latlng(result),{
              icon: new L.NumberedDivIcon({
                number: key,
                state: pin
              })
            });

            function setHighlightIcon(e) {
              new_marker = e.target;
var pinselected = pin+1;

                new_marker.setIcon(new L.NumberedDivIcon({number: key, state:pinselected}));
                new_marker.setZIndexOffset(+100)
    }

function setDefaultIcon() {
var pindeselected = pin;              
new_marker.setIcon(new L.NumberedDivIcon({number: key, state: pindeselected}));  
   }

new_marker.on({
    'click': setHighlightIcon
});

   markers.push(new_marker.addTo(map));

   return settings.results_el.append(settings.results_template(key, result));
          })
} else {
   return settings.results_el.append(settings.no_results_template());
}
}

Answer 1

您可以使用变量来跟踪突出显示的标记。在每个标记的点击处理程序中，您首先需要检查标记是否已分配给该变量，如果是，则删除突出显示并从变量中删除标记，然后突出显示新标记并将标记分配给变量。您还需要在 map 上设置一个 onclick 处理程序，该处理程序检查变量是否分配给标记，然后删除突出显示并从变量中删除标记。

代码示例:

// Default map
var map = L.map('map', {
  'center': [0, 0],
  'zoom': 0,
  'layers': [
    L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      'attribution': 'Map data © OpenStreetMap contributors'
    })
  ]
});

// Custom icon class without iconUrl
var customIcon = L.Icon.extend({
  options: {
    shadowUrl: 'http://leafletjs.com/docs/images/leaf-shadow.png',
    iconSize: [38, 95],
    shadowSize: [50, 64],
    iconAnchor: [22, 94],
    shadowAnchor: [4, 62],
    popupAnchor: [-3, -76]
  }
});

// Some positions for creating markers
var positions = [
  [0, 120],
  [0, 60],
  [0, 0],
  [0, -60],
  [0, -120]
];

// Function for getting new default icon
function getDefaultIcon() {
  return new customIcon({
    iconUrl: 'http://leafletjs.com/docs/images/leaf-green.png'
  });
}

// Function for getting new highlight icon
function getHighlightIcon() {
  return new customIcon({
    iconUrl: 'http://leafletjs.com/docs/images/leaf-red.png'
  });
}

// Variable to keep track of highlighted marker
var highlight = null;

// Function for removing highlight 
function removeHighlight() {
  // Check for highlight
  if (highlight !== null) {
    // Set default icon
    highlight.setIcon(getDefaultIcon());
    // Unset highlight
    highlight = null;
  }
}

// Loop over positions
positions.forEach(function(position) {

  // Create new marker
  var marker = L.marker(position, {
    // Set default icon
    icon: getDefaultIcon()
  })

  // Marker click
  marker.on('click', function() {
    // Remove highlight
    removeHighlight();
    // Set highlight icon
    marker.setIcon(getHighlightIcon());
    // Assign highlight
    highlight = marker;
  });

  // Add marker to map;
  marker.addTo(map);

});

// Add map click handler, remove highlight
map.on('click', removeHighlight);

body {
  margin: 0;
}
html,
body,
#map {
  height: 100%;
}

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css" data-require="leaflet@0.7.3" data-semver="0.7.3" />
<link rel="stylesheet" href="style.css" />
<div id="map"></div>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js" data-require="leaflet@0.7.3" data-semver="0.7.3"></script>

以下是 Plunker 上的工作示例:http://plnkr.co/edit/K9XmMz?p=preview