在 Vue 应用程序中无法适应 mapbox-gl 的边界答案

【问题标题】：Cannot fit bounds in mapbox-gl , in Vue app在 Vue 应用程序中无法适应 mapbox-gl 的边界
【发布时间】：2019-11-22 14:28:21
【问题描述】：

我使用的是 vue 2.6.10，我有以下依赖 vue-mapbox 0.4.1 和 mapbox-gl 1.3.2

地图可以工作，但我无法获取地图的所有点、创建边界并在那里缩放地图。

我现在在做什么，基于this 和this

在我的模板中

<MglMap 
  ref="map" 
  @load="mapLoaded()">

然后在我的javascript中

import Mapbox from "mapbox-gl"; 
components: { Mapbox}
methods :{
   mapLoaded(){
      let coords = [];
      //coords is array , contains arrays like [-118.578, 51.524]
        let bounds = coords.reduce((bounds, coord)=> {
           return bounds.extend(coord);
        }, this.mapbox.LngLatBounds(coords[0], coords[0])
       );

       this.$refs['map'].map.fitBounds(bounds, { padding: 20 });

  }
},
created(){
  this.mapbox = Mapbox;      
}

这应该可行，但我不断收到

TypeError: this.setSouthWest is not a function

所以我猜this.mapbox.LngLatBounds(coords[0], coords[0]) 有问题，可能this.mapbox. 或LngLatBounds 不起作用。如果我控制台记录coords[0]，则打印一个数组[10.467778, 37.600833]

我错过了什么？谢谢

【问题讨论】：

听起来你只需要继续调试，直到找到问题。
@SteveBennett 是的，一般的想法，还有什么更特别的吗？谢谢
我不能告诉你如何调试。但是您应该能够进一步缩小具体问题的范围。

标签： vue.js mapbox mapbox-gl-js

【解决方案1】：

我遇到了同样的错误。原来我错过了“新”关键字。您可以尝试为“this.mapbox.LngLatBounds”添加“new”关键字以下代码对我有用。

import mapboxgl from 'mapbox-gl'; 
Vue.prototype.$maps = mapboxgl

    this.map = new this.$maps.Map({container: 'mapContainer', // container ID
                        style: 'mapbox://styles/mapbox/streets-v11', // style URL
                        zoom: 9 // starting zoom
                    });
    const sourceMarker = new this.$maps.Marker().setLngLat(origin).addTo(this.map);
    const destMarker = new this.$maps.Marker().setLngLat(destination).addTo(this.map);
    const bounds = new this.$maps.LngLatBounds(origin, destination);
    this.map.fitBounds(bounds);

【讨论】：