MapBox：使用 Vue 的动态标记

Question

Can anyone advise which is the best way to call the marker1 & marker2 actions if the departure & arrival props are set? Is it to be done with async/await, if statement or for loop?

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

A Vue watcher allows you to listen to the component data and run whenever a particular property changes.

I recommend reading this as this does exactly what you want: https://v2.vuejs.org/v2/guide/computed.html .

Mounted definitely is an option however, my assumption from the async/await comment by the author was that they wanted to keep track of the props changing and not only when it gets added to the DOM. If they are only to be used once, then mounted is definitely the way to go. @ehhc

Answer 2

@DragonInTraining I'm not sure whether mounted wouldn't be the appropriate place for it. In that hook, the component is already fully created. So the props are set and can be used. I don't think watchers would be good, because the props should not change later on..

I suggest using the mounted -hook therefore: https://v2.vuejs.org/v2/guide/instance.html#Lifecycle-Diagram