Ionic中使用Leaflet添加地图标记报错：无法读取'marker'属性

嘿，这个问题我之前也碰到过，其实是因为你对Leaflet的导入和API调用方式理解有点偏差~

问题原因 #

你用import leaflet from 'leaflet';导入时，leaflet这个变量就直接对应Leaflet库的全局L对象，所以不需要再通过leaflet.L来访问API方法——leaflet.L本身是不存在的，这就是为什么会报“Cannot read property 'marker' of undefined”的错误。

解决方案 #

这里有两种简单的修正方式，选哪种都可以：

方式1：直接使用导入的leaflet变量调用API

把创建标记的代码改成这样：

leaflet.marker([this.lat, this.lng]).addTo(this.map).bindPopup('Hello!');

整合到你的loadmap函数里就是：

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', { 
      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);
    // 修正后的标记代码
    leaflet.marker([this.lat, this.lng]).addTo(this.map).bindPopup('Hello!');
  }, 50); 
}

方式2：更贴合官方习惯的导入方式

直接把L作为导入变量，这样代码和Leaflet官方文档的写法完全一致，不容易搞混：

// 修改导入语句
import L from 'leaflet';

然后整个函数里都用L来调用API：

loadmap() { 
  setTimeout(() => { 
    this.map = new L.Map('map').setView([this.lat, this.lng], this.zoomLevel); 
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { 
      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);
    // 用L创建标记
    L.marker([this.lat, this.lng]).addTo(this.map).bindPopup('Hello!');
  }, 50); 
}

额外提醒 #

别忘了确保你已经在项目中引入了Leaflet的CSS文件，否则地图可能显示异常。在Ionic里可以在angular.json的styles数组里添加：

"styles": [
  "node_modules/leaflet/dist/leaflet.css",
  // 其他样式文件...
]

内容的提问来源于stack exchange，提问作者Martin I