如何在vue2-google-maps中填充标记

Question

我对整个js真的很陌生，我也不了解很多代码。这是软件包： https : //github.com/xkjyeah/vue-google-maps

这必须在明天明天提交。 但是，这是我到目前为止所做的。 当我单击按钮时。 我得在地图上显示标记。

这是在我的devtools中单击具有@ click =“ showRoute”的按钮后的结果

 showRoute(){

this.fetchDeliveries() ;    


//I want then to populate the map with the marker with the given lat, lng in 
 the response
        }

在它上，然后

Answer 1

数据不足，但是这是一个使用组件的有效示例，该组件使用来自坐标对象的数据填充标记

<teplate>
  <gmap-map ref="mymap" :center="startLocation" :zoom="14" style="width: 100%; height: 300px">
    <gmap-info-window :options="infoOptions" :position="infoPosition" :opened="infoOpened" @closeclick="infoOpened=false">
    {{infoContent}}
    </gmap-info-window>
    <gmap-marker v-for="(item, key) in coordinates" :key="key" :position="getPosition(item)" :clickable="true" @click="toggleInfo(item, key)" />
  </gmap-map>
</template>

<script>
export default {
  data: {
    startLocation: {
      lat: 10.3157,
      lng: 123.8854
    },
    coordinates: {
      0: {
        full_name: 'Erich  Kunze',
        lat: '10.31',
        lng: '123.89'
      },
      1: {
        full_name: 'Delmer Olson',
        lat: '10.32',
        lng: '123.89'
      }
    },
    infoPosition: null,
    infoContent: null,
    infoOpened: false,
    infoCurrentKey: null,
    infoOptions: {
      pixelOffset: {
        width: 0,
        height: -35
      }
    },
  },
  methods: {
    getPosition: function(marker) {
      return {
        lat: parseFloat(marker.lat),
        lng: parseFloat(marker.lng)
      }
    },
    toggleInfo: function(marker, key) {
      this.infoPosition = this.getPosition(marker)
      this.infoContent = marker.full_name
      if (this.infoCurrentKey == key) {
        this.infoOpened = !this.infoOpened
      } else {
        this.infoOpened = true
        this.infoCurrentKey = key
      }
    }
  }
}
</script>

工作小提琴https://jsfiddle.net/burlakko/kc8Ljejv/31/