如何在Ionic 3中正确实施传单搜索?

时间:2018-06-08 07:23:16

标签: ionic-framework leaflet ionic3

我正在尝试在传单地图中搜索位置。我使用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未正确加载。

enter image description here

然后,当我尝试搜索某个位置时,找不到位置显示。

enter image description here

包含传单搜索的完美方式是什么。我想要以下功能:

  1. 如何在输入位置时显示建议?
  2. 如何在输入位置时优先显示孟加拉国的位置?

0 个答案:

没有答案