1

编辑 1

这是git上的源代码

我正在开发一个带有 Mapbox 集成的 Ionic-Vue 项目。我的问题是我无法更新我的 geojson 数据源以在地图上创建标记，geoJson 数据作为道具传入。这是流程

在 APP.vue 上创建了钩子

  1. 使用电容器获取用户当前位置。
  2. .then() 对服务器进行 Axios 调用以获取 JSON 数据
    • 成功后通过突变设置要存储的数据

在 Home.vue [TheMap.vue 的父组件]

  1. 调用的计算值getGeoJson调用 getter 从保存较早步骤的状态中获取 geojson 数据
  2. 将道具与要作为道具发送的 TheMap 组件上的:marker计算值数据绑定。getGeoJson
  3. 监听事件$updatedLocation并调用 API 操作来获取新的 geojson 数据。

在 TheMap.vue 上

  1. 在创建 Hook 时调用createMap().
  2. 在方法中：createMap()
    • 再次使用获取用户坐标capacitorJS
    • 初始化 mapbox 地图并将其保存到this.map变量
    • 添加归因使用this.map.addControl
    • this.map.on("load",cb) 在 cb call .addSource()& thenaddMarkers()
    • 为当前用户新建一个marker并保存到cosntUserLocationMarker
    • UserLocationMarker.on("dragend",CB)发出具有最新当前用户位置的事件

这是相同的代码，只是放置脚本标签而不是整个.vue 文件

APP.Vue

export default {
  name: "App",
  data() {
    return {
      currentLocation: "",
    };
  },
  created() {
    Geolocation.getCurrentPosition()
      .then((result) => {
        this.currentLocation = [
          result.coords.longitude,
          result.coords.latitude,
        ];
        this.$store.dispatch(
          `lists/${POST_GEOJSON_ACTION}`,
          this.currentLocation
        );
      })
      .catch((err) => console.log(err));
  },
};

Home.vue

<template>
   <the-map :markers="geojson" @updatedLocation="updateMap"></the-map>
</template>
<script>
export default {
  name: "Home",
  computed: {
    getGeoJson() {
      return this.$store.getters[`lists/${GET_GEOJSON_GETTER}`];
    },
  },
  methods: {
    updateMap(center) {
      this.$store.dispatch(`lists/${POST_GEOJSON_ACTION}`, center);
    },
  },
};

</script>

TheMap.vue

export default {
  props: ["markers"],
  emits: ["updatedLocation"],
  data() {
    return {
      access_token: process.env.VUE_APP_MAP_ACCESS_TOKEN,
      center: [0, 0],
      map: {},
    };
  },
  mounted() {
    this.createMap();
  },
  methods: {
    async createMap() {
      try {
        const coords = await Geolocation.getCurrentPosition();
        this.center = [coords.coords.longitude, coords.coords.latitude];
        mapboxgl.accessToken = this.access_token;

        //Map Instance
        this.map = new mapboxgl.Map({
          container: "map",
          style: "mapbox://styles/userName/API_KEY",
          center: this.center,
          zoom: 12,
          scrollZoom: true,
        });

        // Custom Attribution over the map for Branding
        this.map.addControl(
          new mapboxgl.AttributionControl({
            customAttribution: ` &#169; Comapny Name`,
          })
        );

        this.map.on("load", function(e) {
          this.map.addSource("places", {
            type: "geojson",
            data: this.markers,
          });
          this.addMarkers();
        });

        const UserLocationMarker = new mapboxgl.Marker({
          draggable: true,
        })
          .setLngLat(this.center)
          .addTo(this.map);

        UserLocationMarker.on("dragend", async (e) => {
          this.center = Object.values(e.target.getLngLat());
          this.$emit("updatedLocation", this.center);
        });
      } catch (err) {
        console.log(err);
      }
    },

    addMarkers() {
      this.markers.features.forEach(function(marker) {
        var el = document.createElement("div");
        el.id = "marker-" + marker.properties.id;
        el.className = "marker";
        new mapboxgl.Marker(el, { offset: [0, -23] })
          .setLngLat(marker.geometry.coordinates)
          .addTo(this.map);
      });
    },
  },
};

我的问题是TheMap.vue确实得到undefined| [{geojson}]但是，作为道具，它不会在初始化时甚至在父组件中更改源之后加载标记。

我期望的是，加载上的地图使用标记道具来构建标记列表（如果可用） else show nothing[handle undefined | null`] 如果在更改的位置上注入了一组新数据作为道具，则更新该标记列表。

4

0 回答 0