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

Question

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

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

这是单击具有@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/