如何包裹的UI控制（mapbox地理位置控制）

Question

我想延長/改變與一些特徵的mapbox地理位置控制，例如：

1. 我想而不是一個FlyTo jumpTo的當前位置
2. 當geocontrol按鈕打開時，我想添加一些行爲（例如阻止拖動）。

我該怎麼做？我試圖使一個包裝，但後來我得到了一些問題：

• 當切換按鈕的顏色將變成藍色但這 不再工作
• 我不知道怎麼的功能添加到的點擊按鈕。

我有一個fiddle顯示我試圖做一個包裝。正如你所看到的flyTo的作品。

mapboxgl.accessToken = 'pk.eyJ1IjoidG1jdyIsImEiOiJIZmRUQjRBIn0.lRARalfaGHnPdRcc-7QZYQ' 


var map = new mapboxgl.Map({ 
    container: 'map', // container id 
    style: 'mapbox://styles/mapbox/streets-v9', //stylesheet location 
    center: [-74.50, 40], // starting position 
    zoom: 9 // starting zoom 
}) 


class GeolocateControlWrapper extends mapboxgl.GeolocateControl { 
    constructor() { 
    super() 
    } 
    _onSuccess(position) { 
    this._map.flyTo({ 
     center: [position.coords.longitude, position.coords.latitude], 
     zoom: 17, 
     bearing: 0, 
     pitch: 0 
    }) 

    this.fire('geolocate', position) 
    this._finish() 
    } 
} 

map.addControl(new GeolocateControlWrapper({ 
    positionOptions: { 
    enableHighAccuracy: true, 
    timeout: 300 
    }, 
    watchPosition: true 
}), 'top-left') 

編輯，更新： 我仍然有我的問題的第2部分的麻煩。我設法弄到了'包裝'的小提琴，但請參閱this。

Uncaught TypeError: Cannot read property 'extend' of undefined 
    at GeolocateControlWrapper._onClickGeolocate (eval at <anonymous> (0.b708727….js:485), <anonymous>:192:48) 
_onClickGeolocate @ Maplayout.vue?f994:154 
VM2654:1 Uncaught SyntaxError: Unexpected identifier 

它引用這條線：

mapboxgl.util.extend(defaultGeoPositionOptions, this.options && this.options.positionOptions || {}) 

任何想法，爲什麼然而，在我的「現實生活」的環境點擊geocontrol按鈕時，我得到下面的錯誤？

編輯，更新： 得到它的工作使用下面的代碼：

class GeolocateControlWrapper extends mapboxgl.GeolocateControl { 
     _onSuccess (position) { 
      this._map.flyTo({ 
      center: [position.coords.longitude, position.coords.latitude], 
      zoom: 17, 
      bearing: 0, 
      pitch: 0 
      }) 

      this.fire('geolocate', position) 
      this._finish() 
     } 

     _setupUI (supported) { 
      super._setupUI(supported) 
      if (supported === false) return 
      this._geolocateButton.className += ' needsclick' 
     } 

     _onClickGeolocate() { 
      super._onClickGeolocate() 
      // toggle watching the device location 
      if (this.options.watchPosition) { 
      if (this._geolocationWatchID !== undefined) { // clear watchPosition 
       console.log('looks good in if....') 
      } 
      else { 
       // enable watchPosition 
       console.log('looks good in else....') 
      } 
      } 
     } 
     } 

Answer 1

我開始你的第一個問題：

• 當切換按鈕的顏色應該變成藍色但是不再 工作

當options.watchPosition設置爲true並且該按鈕用作切換按鈕時，顏色會更改。否則，點擊按鈕只會更新您在地圖上的位置，但不會切換任何內容。 您設置了該選項，但您的構造函數不會將選項對象傳遞給其父類。所以，要麼省略構造完全地或不通過的選項：

class GeolocateControlWrapper extends mapboxgl.GeolocateControl { 
    constructor(options) { 
    super(options) 
    } 

現在你的第二個問題：

• 我不知道怎麼的功能添加到按鈕的點擊。 我想添加一些行爲（例如防止拖動），當geocontrol按鈕被打開時。

的watchPosition繃在_onClickGeolocate()完成。添加this._map.dragPan.disable()和this._map.dragPan.enable()應防止/允許用戶拖動地圖。但是我坐在電腦前，所以我沒有測試地圖是否隨着你的位置變化而變化。