googlemapでのクラスター中心座標の取得
解決したいこと
＜前提＞
Vue.jsのプロジェクトで、googlemapAPIを導入しています。いくつかのピンをfirebaseの登録しており、web画面に表示されます。
ある程度ピンが密集していると、クラスターに、まとめられるようになっているのですが、
クラスターの中心座標を取得する方法はありますでしょうか。
座標取得はクラスタークリック時に実行したいと考えております。
ご存じの方がいらっしゃいましたら、教えていただきたいです。
0
1Answer
試せてはいないのですが、下記公式リファレンスにあるpositionでクラスターの座標は取得できないでしょうか？
0Like
Comments
@nosho96ohi
Questioner
v-on:clickで、
cliclcluster() {
MarkerCluster.addListener("click", (cluster) => {
this.clustercenter = cluster.getCemter()
this.markers.push("cluster.getMarkers()")
console.log(MarkerCluster.getPosition)
})
},
を実行して確認しようとしましたが、
Uncaught TypeError: vue3_google_map__WEBPACK_IMPORTED_MODULE_2__.MarkerCluster.addListener is not a function
となり、まだPositionで取得できるか確認できておりません、、、import { GoogleMap, Marker, MarkerCluster } from "vue3-google-map"
vue3-google-mapのリファレンスはすでに参照されましたでしょうか？リファレンスにある以下のような書き方でイベントの割り付けができないでしょうか？
すみません、
vue3-google-mapだと参照すべきはこっちでした。クリックイベントの割り付けについては、以下の回答にあるコードも参考になるかもです。
@nosho96ohi
Questioner
ご返信ありがとうございます。
これらのドキュメントはすでに参照しておりますが、
あまり詳しく記載されておらず理解できていないのと、様々試しているのですが、うまく動きません、、、"コンポーネント上で次のイベントをリッスンできますMarkerCluster"
"CLUSTER_CLICK: "click""
と書いてあるだけなので、どこに何を書けばいいのかわかりませんでした。
もう一つ、添付してくださったものをみて、試してますが、できていません、、、@nosho96ohi
Questioner
https://qiita.com/n739dev/items/2a2eba4d442cc919f8db
を参照し、オプションのonClusterClickにハンドラを書いたらクリックに反応して、関数を実行しようとしてくれました！
しかし、Positionを使って、this.getcluster = markerCluster.getPosition
console.log(this.getcluster)としましたが、consoleで、undifinedとなりました。
onClusterClickに直接関数を書かず、別に関数を定義すると、
Cannot read properties of undefined (reading 'getCenter')となりました。clickevent(cluster) { this.clustercenter = cluster.getCenter() this.markers.push("cluster.getMarkers()") console.log(this.getcluster) }, clickcluster(cluster) { const markerCluster = new MarkerClusterer({ GoogleMap, Marker, onClusterClick: this.clickevent(cluster), }) this.getcluster = markerCluster.getPosition },こちらで試せる環境がなく、たびたび試してもらう形になり申し訳ないです。
以下のような書き方で、取得できないでしょうか？const markerCluster = new markerClusterer.MarkerClusterer({ map, markers, onClusterClick: (cluster) => { console.log(cluster.position()) }, });@nosho96ohi
Questioner
＞こちらで試せる環境がなく、たびたび試してもらう形になり申し訳ないです。
こちらこそ、アドバイス感謝しております。import { GoogleMap, Marker, MarkerCluster } from "vue3-google-map" import { markerClusterer } from "@googlemaps/markerclusterer" methods:{ clickcluster() { const markerCluster = new markerClusterer.MarkerClusterer({ GoogleMap, Marker, onClusterClick: (cluster) => { console.log(cluster.position()) }, }) this.markers = markerCluster }, },で
Uncaught TypeError: Cannot read properties of undefined (reading 'MarkerClusterer')
となります。オプションのonClusterClickにハンドラを書いたらクリックに反応して、関数を実行しようとしてくれました！
この時はどういった記述だったでしょうか？
@nosho96ohi
Questioner
clickevent(cluster) { this.clustercenter = cluster.getCenter() this.markers.push("cluster.getMarkers()") console.log(this.getcluster) }, clickcluster() { const markerCluster = new MarkerClusterer({ GoogleMap, Marker, onClusterClick: this.clickevent(cluster), }) this.getcluster = markerCluster.getPosition console.log(this.getcluster) },このような記述です。
clickeventという関数を先に定義しておいて、onClusterClick: のところで参照しています。
https://qiita.com/n739dev/items/2a2eba4d442cc919f8db
を参考にしました。ありがとうございます。
こちらの記述でpositionが取得できるか試していただけますか？const markerCluster = new MarkerClusterer({ GoogleMap, Marker, onClusterClick: (cluster) => { console.log(cluster.position()) }, })@nosho96ohi
Questioner
このままではmarkerCluster is defined but nerver usedとなり、実行できないので、clusterの部分をmarkerClusterに変えればよいでしょうか。
変えて実行した結果、Uncaught ReferenceError: Cannot access 'markerCluster' before initialization
となりました。先ほどの投稿に記述ミスがあったので少し修正しました。
markerCluster is defined but nerver used
こちらの記述に関しては、以下の記事を参考にすればエラーが消せると思います。@nosho96ohi
Questioner
ありがとうございます。エラーは出なくなりました。
しかし、コンソールには何も出ません。
いろいろためしてみて、
console.log(cluster.position())も
console.log(cluster.position(markerCluster))も
console.log(cluster.getCenter())も
console.log(cluster.getcluster())も
何もコンソールには表示されていません。@nosho96ohi
Questioner
ここでの、clusterには何が入ってるのでしょうか。今の記述では、onClusterClickのハンドラの引数ｘでしかなくて、ほかの部分でclusterの定義はないので、そこがまずいのかもしれません。
以下のような記述で、クリック時にログは表示されますか？
onClusterClick: (cluster) => { console.log("test") },イベントハンドラの引数にはCluster自体の要素が入ってくるものと思っておりました。
上記サイトを参考にもしかしたら、こっちの記述が正しいかもです。
以下のようにすると何か表示されますか？onClusterClick: (event, cluster, map) => { console.log(cluster.position()) },@nosho96ohi
Questioner
どちらも何も表示されませんでした。
そもそもクリックイベントが割り付いてないですね…
そもそもマーカークラスタを定義しているところはどのような記述になっていますか？
少し伝え方を変えると、
vue3-google-mapをお使いとのことで、以下のような記述を書いてあるのかなと思います。そのオプション部分で先ほどのようなonClusterClickを記述してあげるとクリックイベントが実行されないでしょうか？
@nosho96ohi
Questioner
全体は、以下のようになってます。
<template> <div class="container"> <GoogleMap api-key="" style="width: 100%; height: 500px" :center="center" :zoom="5" > <MarkerCluster v-on:click="clickcluster()"> <Marker v-for="(location, i) in locations" :options="{ position: location }" :key="i" @click="open" > </Marker> </MarkerCluster> </GoogleMap> </template> <script> import { GoogleMap, Marker, MarkerCluster } from "vue3-google-map" import { MarkerClusterer } from "@googlemaps/markerclusterer" export default defineComponent({ components: { GoogleMap, Marker, MarkerCluster }, }), methods:{ clickcluster() { const markerCluster = new MarkerClusterer({ GoogleMap, Marker, onClusterClick: (event, cluster, map) => { console.log("test") }, }) }, }, </script>添付していただいたサイトと同じようにクラスターは定義されています、、、
@nosho96ohi
Questioner
公式DOCを参考にして、リスナー登録してみても何も変わらなかったです。
window.google.maps.event.addListener( markerCluster, "clusterclick", () => { console.log("test") } )Vue.jsの開発環境を整えて実際に私も試してみました。
以下の記述でクリック時にマーカーの座標が取得できることが確認できました。
<MarkerCluster :options="{ onClusterClick: (event, cluster, map) => { console.log(cluster.position); console.log(cluster.position.lat()); console.log(cluster.position.lng()); }, }" > <Marker v-for="(location, i) in locations" :key="i" :options="{ position: location }" /> </MarkerCluster>@nosho96ohi
Questioner
私の方でも座標取得できました。長い間解決に協力いただき、ありがとうございました。
@nosho96ohi
Questioner
もしよろしければ、どの記事を参考になさったか教えていただけますか？
vue3-google-mapとjs-markerclustererのリファレンスを参考にしながら、書き方をいろいろ試していました。この部分でオプションの指定方法に気づき、
こちらでonClusterClickHandlerの書き方を参考にしてうまくいった、という感じです！
@nosho96ohi
Questioner
ありがとうございます。