普通HTML页面引入Vue后注册VueMapbox及解决MglMap未定义的方法咨询

MglMap is not defined报错是因为通过Script标签直接引入VueMapbox的UMD资源时，所有组件不会自动注册为全局变量，而是统一挂载在window.VueMapbox对象下，直接调用未声明的MglMap变量自然触发引用错误。

1. 按顺序引入所有依赖资源 #

将以下标签放在HTML的<head>区域，注意引入顺序不能调整：

<!-- 引入Mapbox GL样式文件 -->
<link href="https://api.mapbox.com/mapbox-gl-js/v1.13.0/mapbox-gl.css" rel="stylesheet">
<!-- 引入Mapbox GL核心JS -->
<script src="https://api.mapbox.com/mapbox-gl-js/v1.13.0/mapbox-gl.js"></script>
<!-- 引入Vue 2.x（VueMapbox目前仅兼容Vue 2） -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.min.js"></script>
<!-- 引入VueMapbox UMD包 -->
<script src="https://cdn.jsdelivr.net/npm/vue-mapbox@0.4.1/dist/vue-mapbox.umd.min.js"></script>

2. 补充MglMap样式 #

如果不给地图容器设置宽高，地图会无法正常显示，添加如下CSS：

.mgl-map {
  width: 100%;
  height: 600px;
}

3. 修正组件注册和实例代码 #

首先从VueMapbox对象中提取需要的组件，再注册到Vue实例中，修正后的完整代码如下：

页面模板代码 #

<div id="app">
  <MglMap
      :mapboxGl="mapboxGl"
      :accessToken="accessToken"
      :mapStyle.sync="mapStyle"
      @load="onMapLoaded"
  />
</div>

Vue实例代码 #

// 从全局VueMapbox对象中提取MglMap组件
const { MglMap } = VueMapbox

new Vue({
    el: '#app',
    components: {
      MglMap
    },
    data: {
      accessToken: '替换为你自己的Mapbox有效访问令牌',
      mapStyle: 'mapbox://styles/mapbox/outdoors-v11',
      // 绑定全局的mapboxgl对象
      mapboxGl: window.mapboxgl
    },
    methods: {
      onMapLoaded(map) {
        // 地图加载完成后的回调逻辑，可在这里操作地图实例
        this.mapbox = map
      }
    }
})

• 必须替换accessToken为你在Mapbox平台申请的有效令牌，否则地图会加载失败
• VueMapbox目前仅支持Vue 2.x版本，不要引入Vue 3的资源，否则会出现兼容问题
• 如果需要使用其他VueMapbox组件（比如标记、图层等），同样从VueMapbox对象中提取即可，例如const { MglMarker, MglPopup } = VueMapbox

内容的提问来源于stack exchange，提问作者Martin Bernt Rud