inocan-group / vue3-google-map

A set of composable components for easy use of Google Maps in your Vue 3 projects.
https://vue3-google-map.com
MIT License
272 stars 54 forks source link

Does <Polyline> not support custom icon settings? #92

Closed cullenmarcels closed 2 years ago

cullenmarcels commented 2 years ago
let options = {
  path: [xxx, xxx, xxx],
  icons: [{
    icon: {
      path:  XXX ,
      fillColor: "#fefefe",
      fillOpacity: 1,
      strokeWeight: 0,
      rotation: 0,
      scale: 0.01,
      anchor: new google.maps.Point(500, 900)
    },
    repeat: "150px"
  }

error: google is not defined i can't find a way to customize setting icon at < Polyline >

HusamElbashir commented 2 years ago

You should wait until the map is ready @cullenmarcels . See Advanced Usage. Example:

const icon = computed(() => mapRef.value?.ready
  ? {
      path:  XXX ,
      fillColor: "#fefefe",
      fillOpacity: 1,
      strokeWeight: 0,
      rotation: 0,
      scale: 0.01,
      anchor: new mapRef.value.api.Point(500, 900) // or new google.maps.Point(500, 900)
    }
  : null)

const options = computed(() => ({
  path: [xxx, xxx, xxx],
  icons: [{
    icon: icon.value,
    repeat: "150px"
  }
 ...
cullenmarcels commented 2 years ago

tks!