如何在 ionic 4 中使用传单（向地图添加标记）答案

【问题标题】：How to use leaflet in ionic 4 (Adding markers to the map)如何在 ionic 4 中使用传单（向地图添加标记）
【发布时间】：2019-08-19 15:30:48
【问题描述】：

我正在尝试在 ionic 中使用传单 leaflet。我这样导入传单：import leaflet from 'leaflet';

为了构建地图，我写了这个：

  loadmap() {
setTimeout(() => {
  this.map = new leaflet.Map('map').setView([this.lat, this.lng], this.zoomLevel);
  leaflet.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
     // tslint:disable-next-line
    attribution: 'Map data &copy; <a '
  + 'href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a '
  + 'href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery '
  + '© <a href="https://www.mapbox.com/">Mapbox</a>',
    maxZoom: 18
  }).addTo(this.map);

}, 50);

} 这工作得很好。接下来我要做的是向地图添加标记，如下所示：leaflet.L.marker([this.lat, this.lng]).addTo(this.map).bindPopup('Hello!');

但这不起作用，我收到以下错误消息

ERROR TypeError: Cannot read property 'marker' of undefined

如何寻址'L'，我已经尝试了一些不同的方法，但没有成功。有什么建议吗？

最好的问候！

【问题讨论】：

标签： ionic-framework leaflet

【解决方案1】：

只需修改您的导入：import L from 'leaflet'

然后你的代码的其余部分就变成了文档，即L.map()、L.tileLayer()、L.marker()等。

否则，如果您保留当前的导入语法，只需将文档中的 L 命名空间替换为默认导入即可，即在您的情况下为“leaflet”：leaflet.map()、leaflet.tileLayer()、leaflet.marker() 等。

【讨论】：