获取自定义传单搜索控件以获取搜索选择的边界

时间:2018-10-29 17:02:42

标签: leaflet

因此,我下面有一个无法正常运行的代码,我希望当用户单击列表中的项目时,地图转到所选标记。向下滚动到显示ItemSelected的位置,错误我得到的是getBounds不是一个函数。我是在滥用此方法还是需要使用其他方法来获取地图以拉起所选标记?

function sortBurearuIds(a, b) {
  var _a = a.feature.properties.bureauid;
  var _b = b.feature.properties.bureauid;
  if (_a < _b) {
    return -1;
  }
  if (_a > _b) {
    return 1;
  }
  return 0;
}




L.Control.Search = L.Control.extend({
	options:{
		//top right, topleft, bottom right, bottom left
		position: 'topleft',
		placeholder: 'Search...'
	},
	initialize: function (options){
		//constructor
		L.Util.setOptions(this, options);
	},
	onAdd: function (map) {
		// happenes after added to map
		var container = L.DomUtil.create('div','search-container');
		this.form = L.DomUtil.create('form', 'form', container);
		var group = L.DomUtil.create('div','form-group', this.form);
		this.input = L.DomUtil.create('input', 'form-control input-sm', group);
		this.input.type = 'text';
		this.input.placeholder = this.options.placeholder;
		this.results = L.DomUtil.create('div','list-group', group);
		L.DomEvent.addListener(this.input,'keyup',_.debounce(this.keyup,300), this);
		L.DomEvent.addListener(this.form,'submit', this.submit, this);
		L.DomEvent.disableClickPropagation(container);
		return container;
	},
	onRemove: function (map){
		// when removed
		L.DomEvent.removeListener(this.input, 'keyup', this.keyup,this);
		L.DomEvent.removeListener(form,'submit', this.submit, this);
		
	},
	
	keyup: function (e) {
		if(e.keycode === 38 || e.keycode === 40){
			// do nothing
		} else {
			this.results.innerHTML = '';
			if(this.input.value.length > 2) {
				var value = this.input.value;
				var results = _.take(_.filter(this.options.data, function(x) {
					return x.feature.properties.bureauid.toUpperCase().indexOf(value.toUpperCase()) > - 1;
				}).sort(sortBurearuIds), 10 );
				_.map(results, function(x){
					var a = L.DomUtil.create('a', 'list-group-item');
					a.href = '';
					a.setAttribute('data-result-name', x.feature.properties.bureauid);
					a.innerHTML = x.feature.properties.bureauid;
					this.results.appendChild(a);
					L.DomEvent.addListener(a, 'click', this.itemSelected, this);
					return a;
				}, this);
			}
		}
	},
	itemSelected: function(e) {
		L.DomEvent.preventDefault(e);
		var elem = e.target;
		var value = elem.innerHTML;
		this.input.value = elem.getAttribute('data-result-name');
		var feature = _.find(this.options.data, function(x) {
		  return x.feature.properties.bureauid === this.input.value;
		}, this);
		if (feature) {
		  this._map.fitBounds(feature.getBounds());
		}
		this.results.innerHTML = '';
	  },
	submit: function() {
		L.DomEvent.preventDefault(e);
	},
});

L.control.search = function (id, options) {
	return new L.Control.Search(id, options);
}

0 个答案:

没有答案