googlemapでのクラスター中心座標の取得

Comments

1. 

   @nosho96ohi

   Questioner

   more_horiz

   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"

2. 

   @YottyPG

   more_horiz

   vue3-google-mapのリファレンスはすでに参照されましたでしょうか？

   リファレンスにある以下のような書き方でイベントの割り付けができないでしょうか？

3. 

   @YottyPG

   more_horiz

   すみません、vue3-google-mapだと参照すべきはこっちでした。

4. 

   @YottyPG

   more_horiz

   クリックイベントの割り付けについては、以下の回答にあるコードも参考になるかもです。

5. 

   @nosho96ohi

   Questioner

   more_horiz

   ご返信ありがとうございます。
   これらのドキュメントはすでに参照しておりますが、
   あまり詳しく記載されておらず理解できていないのと、様々試しているのですが、うまく動きません、、、

   "コンポーネント上で次のイベントをリッスンできますMarkerCluster"
   "CLUSTER_CLICK: "click""
   と書いてあるだけなので、どこに何を書けばいいのかわかりませんでした。
   もう一つ、添付してくださったものをみて、試してますが、できていません、、、

6. 

   @nosho96ohi

   Questioner

   more_horiz

   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
       },
   

7. 

   @YottyPG

   more_horiz

   こちらで試せる環境がなく、たびたび試してもらう形になり申し訳ないです。
   以下のような書き方で、取得できないでしょうか？

   const markerCluster = new markerClusterer.MarkerClusterer({
       map,
       markers,
       onClusterClick: (cluster) => {
           console.log(cluster.position())
       },
   });
   

8. 

   @nosho96ohi

   Questioner

   more_horiz

   ＞こちらで試せる環境がなく、たびたび試してもらう形になり申し訳ないです。
   こちらこそ、アドバイス感謝しております。

   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')
   となります。

9. 

   @YottyPG

   more_horiz

   オプションのonClusterClickにハンドラを書いたらクリックに反応して、関数を実行しようとしてくれました！

   この時はどういった記述だったでしょうか？

10. 

    @nosho96ohi

    Questioner

    more_horiz

    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
    を参考にしました。

11. 

    @YottyPG

    more_horiz

    ありがとうございます。
    こちらの記述でpositionが取得できるか試していただけますか？

        const markerCluster = new MarkerClusterer({
            GoogleMap,
            Marker,
            onClusterClick: (cluster) => {
                console.log(cluster.position())
            },
          })
    

12. 

    @nosho96ohi

    Questioner

    more_horiz

    このままではmarkerCluster is defined but nerver usedとなり、実行できないので、clusterの部分をmarkerClusterに変えればよいでしょうか。

    変えて実行した結果、Uncaught ReferenceError: Cannot access 'markerCluster' before initialization
    となりました。

13. 

    @YottyPG

    more_horiz

    先ほどの投稿に記述ミスがあったので少し修正しました。

    markerCluster is defined but nerver used
    こちらの記述に関しては、以下の記事を参考にすればエラーが消せると思います。

14. 

    @nosho96ohi

    Questioner

    more_horiz

    ありがとうございます。エラーは出なくなりました。

    しかし、コンソールには何も出ません。
    いろいろためしてみて、
    console.log(cluster.position())も
    console.log(cluster.position(markerCluster))も
    console.log(cluster.getCenter())も
    console.log(cluster.getcluster())も
    何もコンソールには表示されていません。

15. 

    @nosho96ohi

    Questioner

    more_horiz

    ここでの、clusterには何が入ってるのでしょうか。今の記述では、onClusterClickのハンドラの引数ｘでしかなくて、ほかの部分でclusterの定義はないので、そこがまずいのかもしれません。

16. 

    @YottyPG

    more_horiz

    以下のような記述で、クリック時にログは表示されますか？

    onClusterClick: (cluster) => {
       console.log("test")
    },
    

    
    
    

    イベントハンドラの引数にはCluster自体の要素が入ってくるものと思っておりました。

    上記サイトを参考にもしかしたら、こっちの記述が正しいかもです。
    以下のようにすると何か表示されますか？

    onClusterClick: (event, cluster, map) => {
       console.log(cluster.position())
    },
    

17. 

    @nosho96ohi

    Questioner

    more_horiz

    どちらも何も表示されませんでした。

18. 

    @YottyPG

    more_horiz

    そもそもクリックイベントが割り付いてないですね…

    そもそもマーカークラスタを定義しているところはどのような記述になっていますか？

19. 

    @YottyPG

    more_horiz

    少し伝え方を変えると、
    vue3-google-mapをお使いとのことで、以下のような記述を書いてあるのかなと思います。

    そのオプション部分で先ほどのようなonClusterClickを記述してあげるとクリックイベントが実行されないでしょうか？

    

20. 

    @nosho96ohi

    Questioner

    more_horiz

    全体は、以下のようになってます。

    <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>
    

    添付していただいたサイトと同じようにクラスターは定義されています、、、

21. 

    @nosho96ohi

    Questioner

    more_horiz

    公式DOCを参考にして、リスナー登録してみても何も変わらなかったです。

    window.google.maps.event.addListener(
            markerCluster,
            "clusterclick",
            () => {
              console.log("test")
            }
          )
    

    https://developers.google.com/maps/documentation/javascript/events?hl=ja&_gl=1*1ccn1rg*_up*MQ..*_ga*NDM4MTkwNTU4LjE3MDgwNjk5MjI.*_ga_NRWSTWS78N*MTcwODA2OTkyMi4xLjAuMTcwODA2OTkyMi4wLjAuMA..

22. 

    @YottyPG

    more_horiz

    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>
    

23. 

    @nosho96ohi

    Questioner

    more_horiz

    私の方でも座標取得できました。長い間解決に協力いただき、ありがとうございました。

24. 

    @nosho96ohi

    Questioner

    more_horiz

    もしよろしければ、どの記事を参考になさったか教えていただけますか？

25. 

    @YottyPG

    more_horiz

    vue3-google-mapとjs-markerclustererのリファレンスを参考にしながら、書き方をいろいろ試していました。

    この部分でオプションの指定方法に気づき、
    

    こちらでonClusterClickHandlerの書き方を参考にしてうまくいった、という感じです！

26. 

    @nosho96ohi

    Questioner

    more_horiz

    ありがとうございます。