新的 mapboxgl.NavigationControl() 不起作用

Question

我一直在尝试通过多种方式将导航控件添加到我的地图，window 没有出现，当我看到我的控制台时它没有抛出任何错误。这是我的代码，来自 Mapbox GL JS 文档：

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

</template>

<script>
/* eslint-disable */
export default {
  computed: {
    location () {
      // eslint-disable-next-line no-console
      console.log(this.$store.state.location)
      return location
    }
  },
  mounted () {
    this.createMap()
    // document.querySelector('.mapboxgl-ctrl-geocoder input').focus()
  },
  methods: {
    createMap () {
      const mapboxgl = require('mapbox-gl')
      const MapboxGeocoder = require('@mapbox/mapbox-gl-geocoder')

      mapboxgl.accessToken = 'pk.eyJ1IjoicGlucGFydGRldiIsImEiOiJjajBqOXh0anAwMDFkMzNwbW5qMzVuZGo0In0.ltvQzboVtprxfeFAVOw1GA'

      // init the map
      var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/ximenabc/ck44uqzs21gk71cmtma66htry',
        center: [-96.707, 17.065], // starting position [lng(-180, 180), lat(-90, 90)]
        zoom: 15,
        pitch: 0,
        minZoom: 2,
        maxZoom: 20,
        attributionControl: false,
        showCompass: true
      })

      map.addControl(new mapboxgl.NavigationControl())

      this.MapboxGeocoder = new MapboxGeocoder({
        accessToken: [MY-ACCESS-TOKEN],
        marker: true
      })
      // mapboxgl.addLayer({
      //   id: 'points'
      //   type: 'circle'
      // })
    //   var marker = new mapboxgl.Marker({
    //     draggable: true
    //   })
    //   .setLngLat([-96.707, 17.065])
    //   .addTo(map);
    //   marker.on('dragend', onDragEnd);
     },
  }
}
</script>

<style>
  #map {
    max-height: 20cm;
    min-height: 15cm;
  }
</style>

如您所见，我也尝试添加一些点，但没有成功。我正在与 Nuxt 合作

Answer 1

好的，问题是你没有包含 Mapbox 的 CSS。导航器控件存在但不可见。

您可以将其添加到底部，就在 </script>

上方

import 'mapbox-gl/dist/mapbox-gl.css';

如果这不起作用，请将其添加到您的 index.html:

<link href="https://api.mapbox.com/mapbox-gl-js/v1.6.1/mapbox-gl.css" rel="stylesheet" />

或在nuxt.config.js中描述here。

新的 mapboxgl.NavigationControl() 不起作用

new mapboxgl.NavigationControl() doesn’t work

mapbox-gl-js

mapbox-marker

nuxt.js