MapBox：使用 Vue 的動態標記

Question

如果設置了departure和arrival道具，任何人都可以建議調用marker1和marker2動作的最佳方式嗎？ 是用 async/await、if 語句還是 for 循環來完成？

props: {
    departure: Object,
    arrival: Object
},
methods: {
    initMapBox() {
        const mapboxgl = require('mapbox-gl/dist/mapbox-gl.js');

        mapboxgl.accessToken = 'pk.eyJ1IjoiY3dHNkMDUifQ.xaSxrVMLZtfGAlWoGvB1PQ';
        const map = new mapboxgl.Map({
            container: 'map',
            style: 'mapbox://styles/aasnapop/ck9d',
            center: [22.253, 45.419],
            zoom: 6
        });
        const marker1 = new mapboxgl.Marker({ color: '#FFFFFF', anchor: 'center' })
            .setLngLat([this.departure.longitude, this.departure.latitude])
            .addTo(map);

        const marker2 = new mapboxgl.Marker({ color: '#FFFFFF' })
            .setLngLat([this.arrival.longitude, this.arrival.latitude])
            .addTo(map);
    }

Answer 1

Vue watcher 允許您監聽組件數據並在特定屬性更改時運行。

我建議閱讀此內容，因為這正是您想要的： https ://v2.vuejs.org/v2/guide/computed.html。

Mounted 絕對是一個選項，但是，我從作者的 async/await 評論中假設他們想要跟蹤 props 的變化，而不僅僅是當它被添加到 DOM 時。 如果它們只使用一次，那么mounted絕對是要走的路。 @ehhc

Answer 2

@DragonInTraining 我不確定mounted是否不適合它。 在該掛鈎中，組件已經完全創建。 這樣道具就設置好了，可以使用了。 我不認為觀察者會很好，因為道具以后不應該改變..

因此，我建議使用mounted ： https ://v2.vuejs.org/v2/guide/instance.html#Lifecycle-Diagram