程序员经验分享-hwhale

Mapbox 与 Angular 6.“找不到地图容器”错误

2023-12-23

我正在开发我的第一个角度网络应用程序，我想介绍一些类似于谷歌地图的东西。由于新的计费策略，我不想使用最后一个，所以我尝试了 MapBox。

按照教程，我成功创建了我需要的地图；问题是，我不知道如何在角度分量上显示它。

我为地图生成了这个文件，并且当我将其直接粘贴到我的角度项目的 index.html 上时，它可以与浏览器完美配合。但是当我尝试在组件上使用它时，我不知道该怎么做。

<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8' />
    <title>Points on a map</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.47.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.47.0/mapbox-gl.css' rel='stylesheet' />
    <style>
      body {
        margin: 0;
        padding: 0;
      }

      #map {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
      }
    </style>
  </head>
  <body>
      <div id='map'></div>
      <script>
        mapboxgl.accessToken = 'myToken'; // replace this with your access token
        var map = new mapboxgl.Map({
        container: 'map',
        style: 'my style URL', // replace this with your style URL
        center: [-2.8662684, 43.2806562],
        zoom: 15
});
// code from the next step will go here

        map.on('click', function(e) {
          var features = map.queryRenderedFeatures(e.point, {
          layers: ['rhynux'] // replace this with the name of the layer
      });

        if (!features.length) {
          return;
         }

      var feature = features[0];

      var popup = new mapboxgl.Popup({ offset: [0, -15] })
.setLngLat(feature.geometry.coordinates)
.setHTML('<h3>' + feature.properties.title +      '</h3><p>' + feature.properties.description +     '</p>')
.setLngLat(feature.geometry.coordinates)
        .addTo(map);
    });


    </script>
  </body>
</html>

I moved <div id="map"></div>到组件；但抛出错误“找不到地图容器”。

我还尝试安装一些 npm 软件包，例如this one https://www.npmjs.com/package/angular-mapbox但对于像我这样的新手如何使用它没有足够的信息。

这又是一个 https://www.npmjs.com/package/ngx-mapbox-gl也没有文档...

我查看了几篇 SO 帖子，但不知道如何做到这一点。

谢谢。非常感谢您的帮助


我遇到了同样的问题，并通过使用 @ViewChild 来定位地图元素来解决它。这是一个简单的 Angular 组件，它将显示 Mapbox 地图。

import { Component, OnInit, AfterViewInit, ViewChild, ElementRef } from '@angular/core';
import mapboxgl from 'mapbox-gl';

@Component({
  selector: 'app-map',
  template: '<div #mapElement style="height:200px"></div>'
})
export class MapComponent implements OnInit {

    map: mapboxgl.Map;
    @ViewChild('mapElement') mapElement: ElementRef;
    constructor() { }

    ngOnInit() {
        mapboxgl.accessToken = 'ACCESS_TOKEN_HERE';
    }

    ngAfterViewInit(){
        this.map = new mapboxgl.Map({
            container: this.mapElement.nativeElement,
            style: 'mapbox://styles/mapbox/streets-v9'
        });
    }   

}
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

angular

mapboxgljs

mapboxgl

Mapbox 与 Angular 6.“找不到地图容器”错误 的相关文章

随机推荐

  • `document` 未定义 Electron

    我正在尝试使用以下方法从文件中读取 JSONfs模块 并将其显示在div带身份证list在电子应用程序中 我的代码在index js看起来像这样 dialog showOpenDialog filenames gt if filenames

  • 如何从另一个目录获取 ruby​​ 文件

    我试图要求一个我在另一个文件中创建的 rake 文件 这两个文件位于两个不同的目录中 我在第一个文件的顶部有 require 在 require 之后的引号内有第二个文件的名称 它告诉我它无法加载此类文件 这是否意味着因为它位于不同的目录中

  • Pandas 从同一数据框中减去 2 行

    如何在以下数据帧 df 中从另一行中减去一行 RECL LCC 1 2 3 RECL LCC 35 107655 36 015210 28 877135 RECL PI 36 961519 43 499506 19 538975 我想做类似

  • Django FormView 和分页

    如果表单有效 我正在使用 django 的 FormView 返回对象集 我的视图函数是这样的 class IdeaView FormView template name contributor browse photo html def

  • 无法启动应用程序（CreateProcess 错误=87），无法使用缩短类路径解决方法

    当我在 Windows 上的 Eclipse 中启动应用程序时 我收到以下错误 执行命令行时发生异常 无法运行程序 CreateProcess error 87 参数不正确 我过去通过缩短 CLASSPATH 解决了这个问题 我现在已经到了

  • 如何维护 Web 应用程序中的状态 - 因为 HTTP 是无状态的

    我是构建 Web 应用程序的新手 刚刚开始学习和设置 Grails 我计划构建一个具有 4 到 5 页流程的应用程序 由于HTTP是无状态协议 那么通常页面之间的状态是如何维护的 我很好奇这里接受的标准是什么 我应该创建会话范围的对象并在页

  • 与 ASP.NET MVC 2 中的 SelectList 作斗争

    我有一个看起来像这样的模型 public class SampleModel public static SampleModel Create return new SampleModel Boolean true set several

  • 如何从命令行打开 SourceTree？

    有没有一种快速简单的方法可以从命令行打开 SourceTree 中的 git 存储库 我从终端做了很多 git 工作 但有时没有什么可以替代良好的历史视图 差异 希望能够在不使用书签的情况下打开 安装 SourceTree 命令行工具将为您

  • 如何从完成块中检索返回值？

    是否可以在主线程上运行完成块 例如 我有一个返回值的方法 int test here one method is called with completion block with return type void obj somemeth

  • 使用 sqlmodel 在 fastapi 中深度嵌套响应模型

    我想在这里重复一下之前的内容question https stackoverflow com questions 74719687 getting joined tables from sqlmodel as a nested respon

  • 将静态库链接到其他静态库

    我有一小段代码依赖于许多静态库 a 1 a n 我想将该代码打包在静态库中并使其可供其他人使用 我的静态库 我们称之为 X 编译得很好 我创建了一个简单的示例程序 它使用 X 中的函数 但是当我尝试将其链接到 X 时 我收到许多关于缺少库

  • 在 Unity3d 中打开 iPhone 和 Android 设备相机

    我正在开发一个应用程序 需要在全视图中打开设备摄像头 并且我正在为 iOS 和 Android 制作这个应用程序 那么谁能告诉我如何在 Unity 中为所有 Android 和 iPhone 设备打开全屏设备摄像头 这对我来说会有很大的帮助

  • 选择另一个选项卡时的 popToRootViewController

    Context 我同时使用 TabViewController 和 NavigationController 这两个选项卡是RECENT and POPULAR他们会显示帖子列表 想象你在里面RECENT选项卡并单击帖子 您将进入posts

  • 是否可以设置现有 Azure blob 的内容处置？

    基于刺激在这里的答案 Azure 存储 API 内容配置 https stackoverflow com questions 20719641 azure storage api contentdisposition 以及在这里找到的信息

  • 如何使用 PendingIntent 从服务到客户端/活动进行通信？

    我一直在 Android 开发者网站上阅读以下文本 特别是在框架主题 gt 服务 gt 启动服务 http developer android com guide topics fundamentals services html Star

  • if else 在mysql中查询

    我需要 mysql 查询中嵌套 if else 条件的示例 您还可以将 case 语句用于 if else 条件 SELECT CASE field1 WHEN A THEN value is A WHEN B THEN value is

  • 为什么“splatting”关键字参数时 ** 是可选的？

    鉴于此方法定义 def foo a nil b nil p a a b b end 当我使用单个哈希参数调用该方法时 哈希总是隐式转换为关键字参数 无论 hash b 1 foo hash gt a gt nil b gt 1 foo ha

  • 在 Typescript 中创建 `toFunc` 泛型方法？

    我有一个 Ts 模型 需要填充一些属性 当前的代码简化是 var claimSummaryDetails Name this store selectSync currentUser Result Family find m gt m Me

  • 上传资源文件时，createBlockOutputStream 中 Spark HDFS 异常

    我正在尝试在集群中运行我的 JARyarn cluster但一段时间后我遇到了例外 最后INFO在失败之前是Uploading resource 我已经检查了所有安全组 确实如此hsdf ls成功但仍然收到错误 bin spark subm

  • Mapbox 与 Angular 6.“找不到地图容器”错误

    我正在开发我的第一个角度网络应用程序 我想介绍一些类似于谷歌地图的东西 由于新的计费策略 我不想使用最后一个 所以我尝试了 MapBox 按照教程 我成功创建了我需要的地图 问题是 我不知道如何在角度分量上显示它 我为地图生成了这个文件 并

热门标签