时间戳

首页 > 解决方案 > 如何在 vue.js 项目中的谷歌地图上添加多个圆圈

javascript - 如何在 vue.js 项目中的谷歌地图上添加多个圆圈

问题描述

这是我加载谷歌地图的代码

<gmap-map
      :center="center"
      :zoom="8"
      style="width:100%;  height: 400px;"
    >
     
     
      <gmap-marker
      
      :key="index"
        v-for="(m, index) in myLatLng"
        :position="m.position"
       :icon="require('./../../../../assets/tower.png')"
      
      ></gmap-marker>
     
        <gmap-circle
        
          :key="index"
          v-for="(pin, index) in myLatLng"
          :center="myLatLng.position"
          :radius="3000"
          :visible="true"
          :options="{fillOpacity:0.5,strokeWeight: 0.5
}"
         
      
          
          >
        </gmap-circle>
    </gmap-map>

这是一个“myLatLng”对象，

 myLatLng: [
      {position:  { lat:6.0535185, lng:80.2209773 }},
      {position: { lat:6.2036027, lng:80.4764655 }},
      {position:  { lat:6.296856600000001, lng:81.2357613}},
]

但我运行项目这些圆圈在地图上不可见。我想显示三个圆圈，使用“myLating”位置作为圆圈的中心点。我如何解决这个问题？

标签： javascriptvue.jsgoogle-mapsgoogle-maps-api-3vuetify.js

解决方案

也许你需要改变这个：

    <gmap-circle
      :key="index"
      v-for="(pin, index) in myLatLng"
      :center="myLatLng.position"
      :radius="3000"
      :visible="true"
      :options="{fillOpacity:0.5,strokeWeight: 0.5">
    </gmap-circle>

对此：

    <gmap-circle
      v-for="(pin, index) in myLatLng"
      :key="index+'circle'"
      :center="pin.position"
      :radius="3000"
      :visible="true"
      :options="{fillOpacity:0.5,strokeWeight: 0.5}">
    </gmap-circle>

问题是:center="myLatLng.position"

推荐阅读