Open SyahmiNawi opened 4 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>
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