我正在尝试在传单地图中搜索位置。我使用leaflet-search插件来实现这一目标。我尝试了以下代码:
import {Component} from '@angular/core';
import {IonicPage, NavController, NavParams} from 'ionic-angular';
import 'leaflet';
import 'leaflet-routing-machine';
import 'leaflet-search'
declare var L: any;
@IonicPage()
@Component({
selector: 'page-map-modal',
templateUrl: 'map-modal.html',
})
export class MapModalPage {
map: L.Map;
center: L.PointTuple;
searchControl: any;
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
leafletMap() {
this.map = L.map('mapId', {
center: this.center,
zoom: 16
});
let searchLayer = L.layerGroup().addTo(this.map);
this.map.addControl(new L.Control.Search({layer: searchLayer}));
L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}', {
attributionControl: false,
maxNativeZoom: 17,
maxZoom: 17
}
).addTo(this.map);
}
ionViewDidLoad() {
this.center = [23.762912, 90.430693];
this.leafletMap();
}
}
搜索图标css未正确加载。
然后,当我尝试搜索某个位置时,找不到位置显示。
包含传单搜索的完美方式是什么。我想要以下功能: