如何在 vue.js 項目中的 Google map 上添加多個圓圈

Question

這是我加載谷歌 map 的代碼

<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' object，

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

但我運行項目這些圓圈在 map 上不可見。 我想顯示三個圓圈，使用“myLating”position 作為圓圈的中心點。 我如何解決這個問題？

Answer 1

也許你需要改變這個：

    <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"