从“app”以外的任何 ID 呈现 Mapbox 地图的问题

问题描述

我正在尝试将 MapBox gl gs 实施到我正在使用 Mithril 构建的项目中，并且在从“应用程序”以外的任何 ID 获取要渲染的地图时遇到问题。在我的 html 正文中，我有一个名为 app 的 div，因此它的工作原理是有道理的。问题是，我不希望地图从初始应用程序位置和我希望从我的案例“地图”中呈现的位置呈现。

html

<html lang="en">

<head>
  <Meta charset="UTF-8" />
  <Meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no" />
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
    integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
    crossorigin="anonymous"></script>
  <!-- bootstrap -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"
    integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh"
    crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"
    integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ"
    crossorigin="anonymous"></script>
  <!-- google fonts -->
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Caudex:wght@700&family=Rock+Salt&display=swap" rel="stylesheet">
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <!-- mapBox -->
  <script src='https://api.mapBox.com/mapBox-gl-js/v2.1.1/mapBox-gl.js'></script>
  <link href='https://api.mapBox.com/mapBox-gl-js/v2.1.1/mapBox-gl.css' rel='stylesheet' />

  <title>NoN</title>
</head>

<body>
  <div id="app"></div>
  <script src="/bundle.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJfdroafW"
    crossorigin="anonymous"></script>
</body>

</html>

和我当前的地图组件：

const m = require("mithril");
import mapBoxgl from 'mapBox-gl';

mapBoxgl.accesstoken = MAPBoxTOKEN
let  map = new mapBoxgl.Map({
        container: 'app',// container id
        // container: 'map',// container id

        style: 'mapBox://styles/mapBox/streets-v11',// style URL
        center: [-74.5,40],// starting position [lng,lat]
        zoom: 9 // starting zoom
    });


const Map = {
    
    view: (vnode) => (

        <div>
        <div id="app"></div>
        </div>
    )
}

export default Map

我只想从 id 为“map”的 div 渲染，如下所示：

const m = require("mithril");

import mapBoxgl from 'mapBox-gl';

mapBoxgl.accesstoken = 'pk.eyJ1IjoiZG10cmVlcyIsImEiOiJja2w4ZHN0NzEyMHI0MzJxbTNuOW56YXlsIn0.jNw5dh1j09irmOYBCTykAg'
let  map = new mapBoxgl.Map({
      
       container: 'map',lat]
        zoom: 9 // starting zoom
    });


const Map = {
    
    view: (vnode) => (

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

export default Map

但是这样做时我收到此错误：

VM472725 bundle.js:1642 Uncaught Error: Container 'map' not found.

解决方法

这个问题是一个类似于这个问题的问题，因为它涉及将一个 3rd 方小部件与 Mithril 集成：Question #62924959

需要将地图初始化代码let map = new mapboxgl.Map(...)放在秘银组件的oncreate(vnode)方法中。然后，您可以直接使用 vnode.dom 传递 dom 元素，也可以使用您在 mithril view 方法中设置的任何内容的 id。我认为正在发生的事情是初始化代码在 dom 元素准备好之前运行，因此发生 Container 'map' not found 错误。

oncreate 方法的文档： oncreate

Mithril 在使用 3rd 方工具时有以下示例代码（即不知道 mithril 的重新渲染等）： 3rd party integration

为了使您的代码更具可重用性，您可以在 dom 元素上使用动态 ID，并在 oncreate 方法中使用它来传递给地图初始化代码。

html javascript mapbox-gl-js mithril.js rendering rendering