问题标签 [ngx-leaflet]

我想在 ng-bootstrap 模态中显示一个 ngx-leaflet 地图，以一个确定的点为中心。该地图被封装在一个组件中，如下所示：

HTML

TS

在另一个组件中，我像这样打开模式：

在模态之外一切正常（地图在给定点居中）但是当我在模态内渲染地图时，地图没有居中。我该如何解决这个问题？

我意识到在小屏幕（如 Galaxy S5 360x460）中，地图显示得很好（居中）。

我对这个问题有点绝望。我想在我的地图标记中显示来自 GeoJSON（一个有效的 GeoJson，它在 geojson.io 中工作）。这似乎很容易，但我看不出我的错误在哪里。我正在使用ngx-leaflet，我的代码是这样的：

map.component.html

map.component.ts

我在编译或 console.log 中没有收到任何错误，但我不知道我做错了什么。我尝试复制我在官方仓库中找到的一些示例，但我无法做到。任何帮助，将不胜感激。提前致谢！

编辑 这是来自服务器的 GeoJson 的一部分：

我正在使用 Angular 5 和 ngx 传单，包括标记集群。一切正常，但单击功能始终输出列表最后一个元素的名称，而工具提示包含正确的名称。

我遇到了一个问题，其他人似乎都遇到了我的 ngx-leaflet 地图在我调整大小之前没有完全呈现的问题。我尝试以多种方式调用 map.invalidateSize()，例如在 ngOnInit、onMapReady 中，所有上述方法都带有超时。我在初始加载时得到了这个。我正在使用 ngx-leaflet 2.5，因为 3.0+ 不适用于 angular 4.4.5。

访问模式的按钮是

CSS是：

这是实际地图的代码

我想制作一个更复杂的弹出窗口，ngx-leaflet它可以使用 Angular 指令，并且通常被视为任何其他 Angular 组件。有没有好的方法来做到这一点？

您可以使用创建弹出窗口L.popup，setContent但这需要原始 html 字符串。

我按照官方 angular-cli教程将 angular-universal 集成到我现有的 angular-cli 应用程序中。

我可以为我的 angular-cli 应用程序执行 SSR。但是当我尝试整合ngx-leaflet时，出现以下错误：

ReferenceError：导航器未定义在 D:\ng2-ssr-pwa\dist\server.js:40251:29

现在，我知道传单正在尝试访问节点上下文中不可用的导航器对象。所以我决定延迟传单渲染，直到页面加载到浏览器中，如这个SO 线程中给出的那样。但我仍然遇到同样的错误。您可以在此处查看带有传单问题的演示应用程序带有传单问题的演示应用程序。

./src/app/browserModuleLoader.service.ts：

./src/app/leaflet/app/leaflet.component.ts：

./src/app/app.component.html：

如何安全地延迟传单渲染，直到平台不是浏览器？

编辑：

我删除了所有与传单相关的代码（browserModuleLoader.service.ts、leaflet.component.ts 等），并且只在 app.module.ts 中保留传单模块导入，实际上这个导入导致了问题。

./src/app/app.module.ts：

./src/app/app.server.module.ts：

如何处理这个 nxg-leaflet 模块导入？

我已经使用 angular5 和 ngx-leaflet ( https://github.com/Asymmetrik/ngx-leaflet )设置了我的应用程序。

我从一张空白地图开始。当用户单击按钮时，地图上会出现标记。当用户选择一个标记时，该标记被识别为一个国家，并且该国家基于一些其他（非重要）数据与其他国家相关联。

在我的 .ts 文件中，我有

我的问题是运行 mapToPartnerCountries() 方法时没有出现新图层。但是，如果我再次单击该按钮，它就会出现。GeoJson 也做同样的事情。我这样做是正确的方式吗？

地图元素中还使用了 this.lLayers 字段...

我知道这是一个经常出现的问题，可以通过修复导入语句来解决。我目前有

我正在引用选项，因此：

我觉得我遇到了这个问题，因为将传单中的所有内容都导入为 L。有什么想法吗？

编辑：我还应该补充一点，这只是在测试中出现。

我想删除或隐藏 LayersControl，因为我使用外部菜单更改了地图的图层。这可能吗？我有这个代码：

HTML

TS

我该怎么做才能使地图不显示允许我更改基础图层的框？提前致谢。

编辑：我可以用 CSS 样式来做，但如果有更好的方法，我更喜欢它

我正在尝试HttpClient post在我的 Angular 应用程序中发送请求多个组件的结果。每当成功执行新请求时，我都会使用Subject并调用它的方法。每个组件订阅服务的.next()postSubject

故障服务定义为

订阅的组件BuildingService.response如下

updateBuildingInfo由用户点击地图触发。

从服务器检索数据并将其传递给组件是可行的：我可以将有效负载输出到每个组件的控制台。但是，组件的模板无法更新。

在今天大部分时间谷歌搜索和摆弄之后，我发现这个实现不会触发 Angular 的更改检测。解决方法是

• 将我的呼叫包含next()在服务中NgZone.run(() => { this.response.next(resp); }
• 在组件中调用ApplicationRef.tick()后this.title = resp['title']。

对于这样一个微不足道的用例，这两种解决方案都感觉像是肮脏的黑客攻击。必须有更好的方法来实现这一点。

因此，我的问题是：一次获取数据并将其发送到多个组件的正确方法是什么？

我还想了解为什么我的实现会避开 Angular 的变更检测系统。

编辑原来我是HttpClient在 Angular 区域之外发起呼叫，因此它无法检测到我的更改，有关更多详细信息，请参阅我的答案。