новый mapboxgl.NavigationControl () не работает - PullRequest
Новая
       65

новый mapboxgl.NavigationControl () не работает

0 голосов
/ 15 января 2020

Я пытался разными способами добавить элемент управления навигацией к моей карте, окно не появляется, и когда я вижу свою консоль, оно не выдает никакой ошибки. Это мой код из документации 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 кстати

1 Ответ

0 голосов
/ 17 января 2020

Хорошо, проблема в том, что вы не включили 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, как описано здесь .

...