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 custom marker border and border-radius? #780

Open Janka55 opened 3 years ago

Janka55 commented 3 years ago

I need to set border-radius: 50% and set a border for my marker's custom icon.

<gmap-map ...>
  <gmap-marker v-for="item in group" title="test" icon="item.icon" position=“item.position” />
</gmap-map>

<script>
  export default {
    data() {
      return {
        group: [
          { position: { ... }, icon: { url: 'A' } },
          { position: { ... }, icon: { url: 'B' } },
          { position: { ... }, icon: { url: 'C' } },
          ...
        ]
      }
    }
  }
</script>

<style lang="less">
  div[title="test"] > img {
    border-radius: 50%;
    border: 1px solid white;
  }
</style>

I try to use 'title' to set my img style, but it works not I want. And I try to find the DOC but I find no api to support it.

Janka55 commented 3 years ago

I think some other css style will also meet this problem. It will not work when I try to bind a style.