Javascript 如何访问在其他组件中定义的映射？

我目前正在使用传单地图（带有Vue2传单）

我所做的几乎是标准的：

• 从应用商店（vuex）中的REST Api导入位置列表
• 然后在地图初始化时，使用存储中的这些信息生成标记

因此，基本上我的映射。vue调用映射：

<v-map ref="map" :zoom="zoom" :center="center">
    <v-tilelayer url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"></v-tilelayer>
    <v-marker-cluster :options="clusterOptions">
        <v-marker v-for="(marker, index) in markers"
            :key="index"
            :lat-lng="makeCoords(marker.location.lat, marker.location.lng)"
                v-on:l-click="showSpot(marker._id, marker.slug, marker.location.lat, marker.location.lng)">
        </v-marker>
    </v-marker-cluster>
</v-map>

因此，在同一模板中，如果我想获得地图的引用，我只需要执行以下操作：

this.$refs.map

但我需要从另一个文件（比如“AddMarker.vue”中执行相同操作，以便使用以下方法在地图上放置新标记：

L.marker([datas.location.lat, datas.location.lng]).addTo(mymap);

其中“mymap”应为Map.vue中定义的对象

当然，由于映射不在同一个文件中，此.$refs.map导致“未定义”

我试图在存储中添加映射引用，但它不工作并引发错误（调用堆栈），我猜它不是用来存储组件的

我试图在存储中提交新标记，但映射不会只是神奇地调整和添加它。我想我真的需要为此调用addTo（）方法

这是商店：

export const state = () => ({
    markers: null
})

export const mutations = {
    setMarkers(state, markers) {
        state.markers = markers
    },

    addMarker(state, marker) {
        state.markers.push(marker)
    }
}

export const actions = {
    async init({ commit }) {
        let { data } = await this.$axios.get(process.env.api.spots)
        commit('setMarkers', data)
    }
}

以下是我对突变的称呼：

    that.$store.commit('map/addMarker', {
            title: values.title,
            description: values.description,
            location: {
                city: that.$store.state.position.infos.city,
                country: that.$store.state.position.infos.country,
                lat: that.$store.state.position.coords.lat,
                lng: that.$store.state.position.coords.lng
            }
        });

标记完全添加到商店中，但地图上什么也没有发生

如果有人知道如何处理这件事？ 谢谢！

您的实际问题是：“如何向

标记添加另一个标记”

“如果您将

标记定义为基于存储的计算标记，则需要向存储添加一个标记


Vue.component（'v-map'，Vue.map）；
Vue.组件（“v-tilelayer”，Vue2传单tilelayer）；
Vue.组件（“v-标记”，VUE2传单标记）；
const store=新的Vuex.store({
声明：{
标记：[
[47.42, -1.25],
[47.41, -1.21],
[47.43, -1.22]
].map（p=>L.latLng（…p））
},
突变：{
addMarker（状态、有效负载）{
状态.标记.推送（有效载荷）；
}
},
行动：{
添加标记({
犯罪
}，有效载荷）{
提交（'addMarker'，有效负载）
}
}
})
常数v=新Vue({
el:“#应用程序”，
商店，
数据（）{
返回{
缩放：13，
中间：[47.413220，-1.219482]，
url:'http://{s}.tile.osm.org/{z}/{x}/{y}.png'，
属性：“©；参与者”，
}
},
计算：{
标记（）{
返回此。$store.state.markers；
}
}
});
设置超时（（）=>{
仓库调度（'addMarker'，L.latLng（47.412，-1.24））；
}，1400）；
html，
身体，
#应用程序{
身高：100%；
保证金：0；
}
考虑在这种情况下使用事件总线；您已经有了可以在地图上添加标记的组件，比如地址列表，当您单击其中一个时，一个pin会掉落到它的位置

// bus.js
import Vue from 'vue';
export const EventBus = new Vue();

// address-list.js
import { EventBus } from './bus.js';

methods: {
   onClick () {
      EventBus.$emit('add-marker', {x:123,y:345});
   }
}

// map.js
import { EventBus } from './bus.js';

EventBus.$on('add-marker', coords => {
   this.addMarker(coords).then(() => this.redrawMap())
});

简单明了，没有太多代码。作为一个全局总线，显然你可以在任何必要的组件中重复使用。
标记从哪里填充？存储？使用可能不是一个坏主意，虽然在存储顶部有点冗余。@RoyJ->是的，它是一个简单的数组，包含所有标记信息作为对象。@btl Mmmh，我不是意识到这一点…可能会派上用场，谢谢！但是为什么你认为它与商店是多余的？它们不是用来做同样的事情的，不是吗？你可以使用或达到同样的效果。我经常发现保持状态是有益的，加上
map
helper函数可以删除很多代码。这不是真的。我一直都不知道已经知道如何将标记添加到“标记”在存储中。但正如我所说，它不会起作用，因为映射不会只是重新初始化自身以显示新标记。但我看到您直接在vue文件中添加存储…是出于此目的吗？您没有将
标记
定义为基于存储的计算。您可以在我的示例中看到它是有效的。这是错误的将其添加到您的存储的过程。如果标记数组更改，地图将更新。请确保您添加到存储的内容与存储中的内容的格式相同。我的错，这完全是另一回事，但它在存储中添加了错误信息，并且没有触发任何错误…但它确实有效！谢谢。这很好我在看到你之前的评论后尝试的方法；效果很好，但仍然不起作用，原因我不明白。但是你的“重画地图（）”让我想到了看重画（）传单的方法，这可能是我错过的一部分。顺便说一句，我发现这是关于使用EventBus的一种更简单的方法：我不熟悉传单，所以我只是假设某个地方有一种重画或更新方法。Google maps需要在不同情况下更新它的平铺层。至于根元素作为事件中心，我不确定帽子这个。$root在嵌套几个组件时总是一样的。我在集成UI库时遇到了一些问题。谢谢你的提示！
// bus.js
import Vue from 'vue';
export const EventBus = new Vue();

// address-list.js
import { EventBus } from './bus.js';

methods: {
   onClick () {
      EventBus.$emit('add-marker', {x:123,y:345});
   }
}

// map.js
import { EventBus } from './bus.js';

EventBus.$on('add-marker', coords => {
   this.addMarker(coords).then(() => this.redrawMap())
});