質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Google マップ

Google Mapは、Google社がオンラインで提供している地図・ローカル検索サービスです。GIS(Geographic Information System:地理情報システム)の中の「WebGIS」に該当します。地図・航空写真・地形の表示方式があり、それぞれユーザーが縮尺を調整して表示させることができます。地域の情報サービスを検索する機能やルート検索の機能も搭載されています。

Q&A

解決済

2回答

2371閲覧

google mapでマーカークラスターを使ってズーム時にマーカーが散るアニメーションを実装したい

tery

総合スコア88

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Google マップ

Google Mapは、Google社がオンラインで提供している地図・ローカル検索サービスです。GIS(Geographic Information System:地理情報システム)の中の「WebGIS」に該当します。地図・航空写真・地形の表示方式があり、それぞれユーザーが縮尺を調整して表示させることができます。地域の情報サービスを検索する機能やルート検索の機能も搭載されています。

0グッド

0クリップ

投稿2019/10/13 05:21

前提・実現したいこと

以下のようにマーカークラスタを使ってズーム時にクラスタされたマーカーが散るアニメーションをつけたいです
Android Javaとかを使うとデフォルトで下記のようなアニメーションがつけられるみたいですが
JavaScriptではどうやっていいかわからず苦戦しています
https://datarockets.com/wp-content/uploads/2018/08/shortexample.gif

以下のようなデフォルトのマーカークラスターのコードにどうやってアニメーションを追加すれば良いのか教えていただけたらと思います

<!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <title>Marker Clustering</title> <style> /* Always set the map height explicitly to define the size of the div * element that contains the map. */ #map { height: 100%; } /* Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; } </style> </head> <body> <div id="map"></div> <script> function initMap() { var map = new google.maps.Map(document.getElementById('map'), { zoom: 3, center: {lat: -28.024, lng: 140.887} }); // Create an array of alphabetical characters used to label the markers. var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'; // Add some markers to the map. // Note: The code uses the JavaScript Array.prototype.map() method to // create an array of markers based on a given "locations" array. // The map() method here has nothing to do with the Google Maps API. var markers = locations.map(function(location, i) { return new google.maps.Marker({ position: location, label: labels[i % labels.length] }); }); // Add a marker clusterer to manage the markers. var markerCluster = new MarkerClusterer(map, markers, {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'}); } var locations = [ {lat: -31.563910, lng: 147.154312}, {lat: -33.718234, lng: 150.363181}, {lat: -33.727111, lng: 150.371124}, {lat: -33.848588, lng: 151.209834}, {lat: -33.851702, lng: 151.216968}, {lat: -34.671264, lng: 150.863657}, {lat: -35.304724, lng: 148.662905}, {lat: -36.817685, lng: 175.699196}, {lat: -36.828611, lng: 175.790222}, {lat: -37.750000, lng: 145.116667}, {lat: -37.759859, lng: 145.128708}, {lat: -37.765015, lng: 145.133858}, {lat: -37.770104, lng: 145.143299}, {lat: -37.773700, lng: 145.145187}, {lat: -37.774785, lng: 145.137978}, {lat: -37.819616, lng: 144.968119}, {lat: -38.330766, lng: 144.695692}, {lat: -39.927193, lng: 175.053218}, {lat: -41.330162, lng: 174.865694}, {lat: -42.734358, lng: 147.439506}, {lat: -42.734358, lng: 147.501315}, {lat: -42.735258, lng: 147.438000}, {lat: -43.999792, lng: 170.463352} ] </script> <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"> </script> <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"> </script> </body> </html>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ご質問をクローズされたようですが、ググってみたところ、おそらくこれを使っているのではないかと思いました。

Leaflet.markercluster | Marker Clustering plugin for Leaflet

デモはこちら。
Leaflet debug page

これをGoogleマップで使うには、このコードをGoogleマップ用に移植するか、LeafletでGoogleマップを表示するか、しかないように思います。
Leaflet.jsでGoogle Maps を表示する – GUNMA GIS GEEK

投稿2020/03/21 07:06

Lhankor_Mhy

総合スコア35865

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

自己解決

未解決ですがクローズします

投稿2020/03/21 05:00

tery

総合スコア88

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問