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

Posted 2023-04-13

【中文标题】如何在 vue2-google-maps 中填充标记

【英文标题】：How to populate markers in vue2-google-maps

【发布时间】：2018-08-06 14:37:34

【问题描述】：

我对整个 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
        

在上面然后

【参考方案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/

【讨论】：

是的，我定义了两组 gmap 标记，第一组主要用于用户在自动完成中键入的位置，然后将该标记移动到该位置。另一个是具有此属性的返回坐标的标记：customer_parcel_id 我用作键（我是对的）??、lat、lng、

您能否修改您的代码，我收到一个错误，提示存在意外令牌。

@d3cypher 你能展示你组件的代码吗？不看代码很难判断出什么问题

作为猜测......也许坐标应该是数字而不是字符串。所以你可以试试

(jsfiddle.net/aiboom/w7b2gzsr/5 ) 很抱歉离开了。你能看看我的代码吗？