Question

对于地图中的某个位置，我想像这样在我的对象中添加一个计算数组：

marker: L.latLng(33.901445, -5.532788),

实际数据：

Projects: [
project [0]:{
  lat : 10.0
  lng: -10.0
},
  project [1]:{
  lat : 15.0
  lng: -15.0  
},
 ],

我想要的结果：

Projects: [
project [0]:{
  lat : 10.0
  lng: -10.0
  marker : L.latLng(10.0, -10.0)
},
  project [1]:{
  lat : 15.0
  lng: -15.0
  marker : L.latLng(15.0, -15.0)
},
 ],

谢谢

Answer 1

我找到了这段代码，谢谢。

export default {
  computed: {
    NewObject() {
      return this.projects.map(project => {
        let p = project;

        p.marker = [{
          lat: project.lat,
          lng: project.lng,
        }];

        return p;
      });
    },
  }
}

在模板中：

<div class="col-md-4"  v-for="project in NewObject">
  <l-map :zoom="zoom" :center="project.marker[0]" @click="">
    <l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>
    <l-marker  :lat-lng="project.marker[0]" @click=""></l-marker>
  </l-map>
</div>

Answer 2

我认为您想要一个可以为您返回对象的简单方法。您在使用https://www.npmjs.com/package/vue2-google-maps

<template>
  <div id="app">
    <pre>{{projects}}</pre>
  </div>
</template>

<script>
export default {
  name: "App",
  methods: {
    setMarkerPosition(lat, lng) {
      return { lat: lat, lng: lng };
    },
    addMarkerPosition(project) {
      project.markerCenter = this.setMarkerPosition(project.lat, project.lng);
      console.log(project);
    }
  },
  mounted() {
    this.projects.forEach(project => {
      this.addMarkerPosition(project);
    });
  },
  data() {
    return {
      projects: [
        {
          lat: 10.0,
          lng: -10.0,
          markerCenter: null
        },
        {
          lat: 15.0,
          lng: -15.0,
          markerCenter: null
        }
      ]
    };
  }
};
</script>

编辑：如果您希望markerCenter是被动的，我认为您需要在开始时就将其包括在数据形状中。

编辑2：我的代码中有一个小错误，我对其进行了更新。

如何在我的对象中添加计算数组？

2 个答案: