vuejs2 - Mapbox 地图点击后未居中

Question

问题是点击地图后，地图的中心不是点击位置，而是右下角。正如您在代码中看到的，我使用的是点击事件。此事件返回 lnglat 属性，它应该是单击位置的纬度和经度。之后，我只是将它作为参数传递给 setCenter 函数。我不知道为什么，但它没有按预期工作。

<template>
  <q-page id="map" class="row items-center justify-evenly"></q-page>
</template>

<script lang="ts">
import Vue from 'vue';
import mapboxgl from 'mapbox-gl';
import 'mapbox-gl/dist/mapbox-gl.css';

export default Vue.extend({
  name: 'PageIndex',
  data() {
    return {
      accessToken:
        'pk.eyJ1IjoidHJldmUiLCJhIjoiY2tieHpzcXMwMHQycDJvb3l5Mmx1dDNtaiJ9.zwt0OXOxbSe7qdQqZkktHw',
      mapStyle: 'mapbox://styles/mapbox/streets-v11',
      coordinates: [-82.43212635515275, 23.12598291578537]
    };
  },
  components: {},
  methods: {
    createMap() {
      mapboxgl.accessToken = this.accessToken;
      const map = new mapboxgl.Map({
        container: 'map',
        style: this.mapStyle, // stylesheet location
        center: [-82.4282686540247, 23.122116998741006], // starting position [lng, lat]
        zoom: 15 // starting zoom
      });
      map.on('click', function(e) {
        console.log('Map clicked:', e);
        map.setCenter(e.lngLat);
      });
    }
  },
  mounted() {
    this.createMap();
  }
});
</script>

<style scoped>
#map {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}
</style>

标签： vuejs2mapbox-gl-js