xkjyeah / vue-google-maps

Google maps component for vue with 2-way data binding
https://xkjyeah.github.io/vue-google-maps/
1.88k stars 475 forks source link

How to set Multiple strokeColor in gmap-polygon options according to path #759

Open dharmdeep opened 3 years ago

dharmdeep commented 3 years ago

Hello, Can someone tell me how to set multiple strokeColor for all paths. Single strokeColor is working great but I am not finding relevant solution for set all different-2 colors for different-2 lat long paths.

Here is code

<gmap-polygon :options="options" ref="polygon" :paths="paths" @click="center=point.path"></gmap-polygon>

can I set array in options ? please suggest

export default {  
  data() {
  return {    
    center: {lat: 12.9538477, lng: 77.3507442},
      markers: [
        { position: { lat: 47.376332, lng: 8.547511 } },
        { position: { lat: 47.374592, lng: 8.548867 } },
        { position: { lat: 47.379592, lng: 8.549867 } }
        ],
      paths: [
          { lat: 24.5797851, lng: 73.6955281 },  { lat: 24.5752836, lng: 73.6934935 },  { lat: 24.5673467, lng: 73.6995224 }
          ], 
      options: {
                strokeOpacity: 0.8,
                strokeWeight: 2,
                strokeColor: #333333,
                fillColor: #333333,
                fillOpacity: 0.4
            }
    }
}
}

So I need to set different-2 strokeColor for all 3 paths dynamically. And same things label for gmap- marker.

Thanks in advance

bonatoc commented 3 years ago

Just tried wrapping the polygon component in a v-for loop, and it works.

Simply make an object or array, store each polygon with its options in it, and then iterate over it.

      <span v-for="singleTargetPolygon in targetPolygons">
      <gmap-polygon 
      :paths="singleTargetPolygon.paths" 
      :options="singleTargetPolygon.options"></gmap-polygon>
      </span>

...then tried this, still works, and doesn't pollute the DOM with useless span tags.

      <gmap-polygon 
      v-for="singleTargetPolygon in targetPolygons" 
      :paths="singleTargetPolygon.paths" 
      :options="singleTargetPolygon.options"></gmap-polygon>