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

Posted 2023-02-16

【中文标题】如何使用传单和 jQuery Birdseye 在点击时突出显示标记

【英文标题】：How to highlight marker on click with leaflet and jQuery Birdseye

【发布时间】：2015-03-25 13:58:49

【问题描述】：

我是传单的新手，试图在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());

【参考方案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

【讨论】：

效果很好，非常感谢。还有一个问题，当标记突出显示并再次单击以设置默认标记时，您将如何实现？

在执行removeHighlight函数之前的点击处理程序中，检查是否设置了高亮，如果是，存储高亮标记的id。然后执行removeHighlight 方法。将setIcon 方法和高亮变量的赋值包装在条件块中，您可以在其中检查前一个 id 是否不等于单击标记的 id。如果不相等，设置高亮，否则什么都不做。这是 Plunker 的分支，证明了这一点：plnkr.co/edit/aqiImS?p=preview

太棒了！非常感谢您抽出宝贵时间进行解释。使用 jQuery Birdseye 让 ti 按我的意愿工作。

完全不用感谢我，这就是SO的目的。您接受了答案，这就足够了，如果您真的喜欢它，可以给它一个赞成票左右。真的不需要谢谢 :) 见：***.com/help/someone-answers