MapBox：使用 Vue 的动态标记答案

【问题标题】：MapBox: Dynamic Markers with VueMapBox：使用 Vue 的动态标记
【发布时间】：2021-08-31 08:31:56
【问题描述】：

如果设置了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);
    }

【问题讨论】：

您可以检查是否在您的mounted() 方法中设置。

标签： vue.js mapbox

【解决方案1】：

@DragonInTraining 我不确定mounted 是否适合它。在该挂钩中，组件已经完全创建。这样道具就设置好了，可以使用了。我不认为观察者会很好，因为道具以后不应该改变..

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

【讨论】：

我实际上是使用 mounted 钩子来调用 initMapBox() 函数，但是我希望标记仅在 departure 和 arrival 道具真实且.setLngLat() 函数应从这两个道具中获取坐标。我现在更新我的代码以反映这一点。

【解决方案2】：

Vue 观察器允许您监听组件数据并在特定属性更改时运行。

我建议阅读此内容，因为这正是您想要的： https://vuejs.org/v2/guide/computed.html.

Mounted 绝对是一个选项，但是，我从作者的 async/await 评论中假设他们想要跟踪 props 的变化，而不仅仅是当它被添加到 DOM 时。如果它们只被使用一次，那么mounted绝对是要走的路。 @ehhc

【讨论】：

请添加更多详细信息以扩展您的答案，例如工作代码或文档引用。
感谢您的回答！我添加了观察者来检查出发/到达道具何时发生变化，但是我很难弄清楚如何运行new mapboxgl.Marker 方法并将这些标记添加到地图中。有什么建议吗？