angular - 错误类型错误:无法读取 ngx-leaflet 和 esri-leaflet-geocoder 上未定义的属性“topleft”
问题描述
我在我的 Angular 9 项目中使用@asymmetrik/ngx-leaflet
和@asymmetrik/ngx-leaflet-draw
用于传单地图。我尝试通过“esri-leaflet-geocoder”在地图中添加搜索选项。没有@asymmetrik/ngx-leaflet
和@asymmetrik/ngx-leaflet-draw
使用我成功地将搜索选项放置在地图中,没有错误。这工作得很好。这是我的工作代码:
/*npm install esri-leaflet esri-leaflet-geocoder*/
import * as L from 'leaflet';
import * as esriGeo from 'esri-leaflet-geocoder';
export class MapComponent implements OnInit {
public searchControl = new esriGeo.Geosearch();
ngOnInit() {
this.initMap(); // not all codes are here;
this.tiles.addTo(L.map); // not all codes are here;
this.searchControl.addTo(L.map);
}
}
但是当我尝试在之前完成的地方实现相同的代码时@asymmetrik/ngx-leaflet
,@asymmetrik/ngx-leaflet-draw
它会说一些错误:ERROR TypeError: Cannot read property 'topleft' of undefined
.
错误输出图像:
解决方案
我刚刚解决了这个问题。虽然我正在使用ngx-leaflet
所以这里L.Map
不是地图的当前实例。从ngx-leaflet
初始化地图LeafletDirective
。所以工作代码是:
/*npm install esri-leaflet esri-leaflet-geocoder*/
import * as L from 'leaflet';
import * as esriGeo from 'esri-leaflet-geocoder';
import { LeafletDirective } from '@asymmetrik/ngx-leaflet'; //new import
export class MapComponent implements OnInit {
public searchControl = new esriGeo.Geosearch();
ngOnInit() {
const map = this.leafletDirective.getMap(); // initialize map
this.searchControl.addTo(map);
}
}
推荐阅读
- xml - XML XSLT 转换问题
- c# - NUnit 测试适配器 3 似乎找不到 NUnit3 框架,导致测试资源管理器不显示测试
- sql - 从 SSRS 中的 SQL 查询生成 TableAdapter
- angular - 当存储中的数据未更改时,订阅正在触发
- python - 更改函数中位置参数的数量
- python-3.x - 摆脱空间直方图 matplotlib
- html - 如何在 django 的新视图中显示单击的项目/图像?
- excel - 使用 vba 将数据粘贴到下一个空列中
- highcharts - Highcharts - 具有数千个项目的树形图中的异步向下钻取
- python - 如何在这种 python 正则表达式情况下指定非贪婪模式?