时间戳

首页 > 解决方案 > 新的 mapboxgl.NavigationControl() 不起作用

nuxt.js - 新的 mapboxgl.NavigationControl() 不起作用

问题描述

我一直在尝试以多种方式将导航控件添加到我的地图中，但没有出现该窗口，并且当我看到我的控制台时它不会抛出任何错误。这是我的代码，来自 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 顺便说一句

标签： nuxt.jsmapbox-gl-jsmapbox-marker

解决方案

好的，问题是您没有包含 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 中，如此处所述。

推荐阅读