xkjyeah / vue-google-maps

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

Is there any way to use containsLocation()? #754

Open SyahmiNawi opened 3 years ago

SyahmiNawi commented 3 years ago

I want to check whether Marker inside polygons or not.

similar to this example form google: https://developers.google.com/maps/documentation/javascript/examples/poly-containsLocation

aoyama-val commented 3 years ago

You can do like this:

<template>
  <div class="hello">
    clicked: {{ clickedLatLng }}  isInside: {{ isInside }}
    <GmapMap
      ref="map"
      :center="{lat: 24.886, lng: -70.269}"
      :zoom="5"
      style="width: 100%; height: 500px"
      @click="onMapClicked"
    >
    </GmapMap>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
  },
  data() {
    return {
      clickedLatLng: undefined,
      isInside: undefined,
      triangleCoords: [
        { lat: 25.774, lng: -80.19 },
        { lat: 18.466, lng: -66.118 },
        { lat: 32.321, lng: -64.757 },
      ],
      polygon: undefined,
    };
  },
  mounted() {
    this.$refs.map.$mapPromise.then((map) => {
      this.polygon = new window.google.maps.Polygon({
                                     paths: this.triangleCoords,
                                     clickable: false,
                                     map: map,
      });
    })
  },
  methods: {
    onMapClicked(ev) {
      this.clickedLatLng = ev.latLng.toString();
      this.isInside = window.google.maps.geometry.poly.containsLocation(ev.latLng, this.polygon);
    }
  }
}
</script>