Question

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

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

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处理程序，检查变量是否已分配给标记，然后删除突出显示并从变量中删除标记。

代码中的一个例子：

＆＃13;

// 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 &copy; 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);

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

1 个答案: