错误：找不到地图容器。使用 Angular 制作传单地图

问题描述 投票：0回答：3

完整错误：

core.js:6479 ERROR Error: Map container not found.
    at NewClass._initContainer (leaflet-src.js:4066)
    at NewClass.initialize (leaflet-src.js:3099)
    at new NewClass (leaflet-src.js:296)
    at Object.createMap [as map] (leaflet-src.js:4691)
    at MapViewComponent.ngAfterViewInit (map-view.component.ts:13)
    at callHook (core.js:2526)
    at callHooks (core.js:2495)
    at executeInitAndCheckHooks (core.js:2446)
    at refreshView (core.js:9536)
    at refreshEmbeddedViews (core.js:10590)

每当我尝试加载包含地图的组件时，我都会收到此消息。这是 .ts 文件 （我隐藏了访问令牌）

import { Component, AfterViewInit } from '@angular/core';
import * as L from 'leaflet';

@Component({
  selector: 'app-map-view',
  templateUrl: './map-view.component.html',
  styleUrls: ['./map-view.component.scss'],
})
export class MapViewComponent implements AfterViewInit {
  constructor() {}

  ngAfterViewInit(): void {
    const mymap = L.map('map').setView([51.505, -0.09], 13);

    L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
      attribution:
        'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
      maxZoom: 18,
      id: 'mapbox/streets-v11',
      tileSize: 512,
      zoomOffset: -1,
      accessToken: 'my.token',
    }).addTo(mymap);
  }
}

.html 文件

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""/>

<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>

<div id="map"></div>

和.css文件

#map {
  height: 500px;
}

这确实是一个简单的地图，我只是按照他们网站上的快速入门指南进行操作，但它不起作用。我已经尝试过 ngOnInit ，它是同样的事情。还向 angular.json 添加了传单。我尝试更改 .html 文件中的行顺序，将地图 div 放在所有 3 个可能的位置，但还是同样的错误。

html angular typescript leaflet mapbox
3个回答
1
投票

这是一个很好的示例

看看我的实现

0
投票

您不应该在组件 html 文件中添加链接和脚本标签。在应用程序index.html中添加这些链接

<body>
    <app-root></app-root>

    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
    integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
    crossorigin="" />

    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
    integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
    crossorigin=""></script>
</body>

组件.html

<div id="map"></div>

组件.ts

declare const L: any;

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {

    ngOnInit() {
        var mymap = L.map('map').setView([51.505, -0.09], 13);
    }
}
0
投票

当我尝试将传单地图放入 Angular Material Tab 组件中时，我遇到了同样的错误。问题是传单正在尝试初始化地图，但 dom 尚未加载。解决这个问题的方法是通过使用 matTabContent 属性在 ng-template 中声明选项卡的主体来实现延迟加载。看起来像这样：

<mat-tab-group preserveContent>
  <mat-tab label="Home">
     <app-home></app-home>
  </mat-tab>
  <mat-tab label="Applications">
    <app-applications></app-applications>
  </mat-tab>
  <mat-tab label="Map">
    <ng-template matTabContent>
      <app-map></app-map>
    </ng-template>
  </mat-tab>
</mat-tab-group>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.