如何在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/