时间戳

首页 > 解决方案 > Vuejs x5-gmaps地图标记不显示

vue.js - Vuejs x5-gmaps地图标记不显示

问题描述

我正在使用 vue2 x5-gmaps 创建地图并显示我的数据库中所有属性的位置。显示我的地图时，尽管我已经指定了标记位置，但上面没有标记。如果我记录对象的纬度和经度，它会正确显示。任何关于我需要改进的帮助或建议将不胜感激。

我的代码如下所示：

<div class="mapImgDiv"> 
   <gmaps-map> 
      <gmaps-marker v-for="(item, i) in propsForMap" :key="i" :position="{lat : parseFloat(item.lat) , lng: parseFloat(item.long) }" />
   </gmaps-map>
</div>

我的方法看起来像这样，我正在使用 firebase

const self = this;
        self.loading_me = true;
        db.collection("Properties")
        .where("homelocation", "==", location)
          .get()
          .then(querySnapshot => {
            querySnapshot.forEach(doc => {
              const data = doc.data();
              self.propsForSale.push(data);
              self.propsForMap.push(data);
            });
            this.loading_me = false;
          })
          .catch(error => {
            console.log(error);
          });

数据快照：

{
"lat" : -1.2804047,
"location: : "Kikuyu Road",
"long" : 36.695223,
"period" : "Month"
}

标签： vue.jsgoogle-maps

解决方案

代码是正确的，我为地图添加了一个中心，以便我可以更好地查看我的理想位置。

mapOptions: {
   center: { lat: -1.3031934, lng: 36.5672003 },
   zoom: 10
}

<gmaps-map :options="mapOptions"> 
              <gmaps-marker v-for="(item, i) in propsForMap" :key="i" :position="{lat: parseFloat(item.lat), lng: parseFloat(item.long)}" />
            </gmaps-map>

推荐阅读