新的 mapboxgl.NavigationControl() 不起作用

Question

我\xc2\xb4一直在尝试以多种方式将导航控件添加到我的地图中，但窗口没有出现，当我看到我的控制台时，它不会\xe2\x80\x99t抛出任何错误。这是我的代码，来自 Mapbox GL JS 文档：

\n\n

<template>\n  <div>\n    <div id="map" class="map">\n    </div>\n  </div>\n\n</template>\n\n<script>\n/* eslint-disable */\nexport default {\n  computed: {\n    location () {\n      // eslint-disable-next-line no-console\n      console.log(this.$store.state.location)\n      return location\n    }\n  },\n  mounted () {\n    this.createMap()\n    // document.querySelector(\'.mapboxgl-ctrl-geocoder input\').focus()\n  },\n  methods: {\n    createMap () {\n      const mapboxgl = require(\'mapbox-gl\')\n      const MapboxGeocoder = require(\'@mapbox/mapbox-gl-geocoder\')\n\n      mapboxgl.accessToken = \'pk.eyJ1IjoicGlucGFydGRldiIsImEiOiJjajBqOXh0anAwMDFkMzNwbW5qMzVuZGo0In0.ltvQzboVtprxfeFAVOw1GA\'\n\n      // init the map\n      var map = new mapboxgl.Map({\n        container: \'map\',\n        style: \'mapbox://styles/ximenabc/ck44uqzs21gk71cmtma66htry\',\n        center: [-96.707, 17.065], // starting position [lng(-180, 180), lat(-90, 90)]\n        zoom: 15,\n        pitch: 0,\n        minZoom: 2,\n        maxZoom: 20,\n        attributionControl: false,\n        showCompass: true\n      })\n\n      map.addControl(new mapboxgl.NavigationControl())\n\n      this.MapboxGeocoder = new MapboxGeocoder({\n        accessToken: [MY-ACCESS-TOKEN],\n        marker: true\n      })\n      // mapboxgl.addLayer({\n      //   id: \'points\'\n      //   type: \'circle\'\n      // })\n    //   var marker = new mapboxgl.Marker({\n    //     draggable: true\n    //   })\n    //   .setLngLat([-96.707, 17.065])\n    //   .addTo(map);\n    //   marker.on(\'dragend\', onDragEnd);\n     },\n  }\n}\n</script>\n\n<style>\n  #map {\n    max-height: 20cm;\n    min-height: 15cm;\n  }\n</style>\n\n

\n\n

正如你所看到的，我也尝试添加一些点，但它没有 \xe2\x80\x99 工作。I\xc2\xb4m 与 Nuxt 一起工作

\n

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 中，如此处所述。