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

Question

我是传单的新手，试图在foursquare上复制该功能，突出显示单击的标记并在单击地图或选择并突出显示另一个标记时将其重置为原始制造商。

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

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

您可以使用变量来跟踪突出显示的标记。在每个标记的单击处理程序中，您首先需要检查是否已将标记分配给该变量，如果是，请删除突出显示并从变量中删除标记，然后突出显示新标记并将标记分配给变量.您还需要在地图上设置一个 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