クラスターマーク

概要

このチュートリアルでは、地図上のマーカーの大規模な数を表示するマーカーのクラスタを使用する方法を紹介します。あなたはできる MarkerClustererPlusのライブラリと地図のJavaScript APIは、クラスタへのマージをマーキング密接に関連して使用し、地図上にマーク表示を簡素化します。

クラスタリングをマークした作品を表示するには、下の地図を参照してください。

番号は、タグが含まれているクラスターの数を示します。クラスタの任意の場所にズームインときノートでは、クラスタ数は減少し、地図上の個々のマーカーを見始めるだろうしてくださいということ。マップの外にマークされ、再びクラスタにマージされます。

次の例では、このマッピングのために必要なすべてのコードの作成を示しています。

ヒント：ビュー NYC地下鉄ロケータソリューションクラスタリングをマークし、より多くの例を参照するには。

それを自分を試してみてください

あなたはクリックすることができ<>、コードウィンドウの右上隅にJSFiddleでこのコードを試してみます。

<span style="color:#37474f"><span style="color:#c53929"><!DOCTYPE html></span>
<span style="color:#3b78e7"><html></span>
  <span style="color:#3b78e7"><head></span>
    <span style="color:#3b78e7"><meta</span> <span style="color:#9c27b0">name</span>=<span style="color:#0d904f">"viewport"</span> <span style="color:#9c27b0">content</span>=<span style="color:#0d904f">"initial-scale=1.0, user-scalable=no"</span><span style="color:#3b78e7">></span>
    <span style="color:#3b78e7"><meta</span> <span style="color:#9c27b0">charset</span>=<span style="color:#0d904f">"utf-8"</span><span style="color:#3b78e7">></span>
    <span style="color:#3b78e7"><title></span>Marker Clustering<span style="color:#3b78e7"></title></span>
    <span style="color:#3b78e7"><style></span>
      <span style="color:#d81b60">/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */</span>
      #map {
        <span style="color:#3b78e7">height</span>: <span style="color:#c53929">100%</span>;
      }
      <span style="color:#d81b60">/* Optional: Makes the sample page fill the window. */</span>
      html, body {
        <span style="color:#3b78e7">height</span>: <span style="color:#c53929">100%</span>;
        <span style="color:#3b78e7">margin</span>: <span style="color:#c53929">0</span>;
        <span style="color:#3b78e7">padding</span>: <span style="color:#c53929">0</span>;
      }
    <span style="color:#3b78e7"></style></span>
  <span style="color:#3b78e7"></head></span>
  <span style="color:#3b78e7"><body></span>
    <span style="color:#3b78e7"><div</span> <span style="color:#9c27b0">id</span>=<span style="color:#0d904f">"map"</span><span style="color:#3b78e7">></div></span>
    <span style="color:#3b78e7"><script></span>

      <span style="color:#3b78e7">function</span> initMap() {

        <span style="color:#3b78e7">var</span> map = <span style="color:#3b78e7">new</span> google.maps.<span style="color:#9c27b0">Map</span>(document.getElementById(<span style="color:#0d904f">'map'</span>), {
          zoom: <span style="color:#c53929">3</span>,
          center: {lat: -<span style="color:#c53929">28.024</span>, lng: <span style="color:#c53929">140.887</span>}
        });

        <span style="color:#d81b60">// Create an array of alphabetical characters used to label the markers.</span>
        <span style="color:#3b78e7">var</span> labels = <span style="color:#0d904f">'ABCDEFGHIJKLMNOPQRSTUVWXYZ'</span>;

        <span style="color:#d81b60">// Add some markers to the map.</span>
        <span style="color:#d81b60">// Note: The code uses the JavaScript Array.prototype.map() method to</span>
        <span style="color:#d81b60">// create an array of markers based on a given "locations" array.</span>
        <span style="color:#d81b60">// The map() method here has nothing to do with the Google Maps API.</span>
        <span style="color:#3b78e7">var</span> markers = locations.map(<span style="color:#3b78e7">function</span>(location, i) {
          <span style="color:#3b78e7">return</span> <span style="color:#3b78e7">new</span> google.maps.<span style="color:#9c27b0">Marker</span>({
            position: location,
            label: labels[i % labels.length]
          });
        });

        <span style="color:#d81b60">// Add a marker clusterer to manage the markers.</span>
        <span style="color:#3b78e7">var</span> markerCluster = <span style="color:#3b78e7">new</span> <span style="color:#9c27b0">MarkerClusterer</span>(map, markers,
            {imagePath: <span style="color:#0d904f">'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'</span>});
      }
      <span style="color:#3b78e7">var</span> locations = [
        {lat: -<span style="color:#c53929">31.563910</span>, lng: <span style="color:#c53929">147.154312</span>},
        {lat: -<span style="color:#c53929">33.718234</span>, lng: <span style="color:#c53929">150.363181</span>},
        {lat: -<span style="color:#c53929">33.727111</span>, lng: <span style="color:#c53929">150.371124</span>},
        {lat: -<span style="color:#c53929">33.848588</span>, lng: <span style="color:#c53929">151.209834</span>},
        {lat: -<span style="color:#c53929">33.851702</span>, lng: <span style="color:#c53929">151.216968</span>},
        {lat: -<span style="color:#c53929">34.671264</span>, lng: <span style="color:#c53929">150.863657</span>},
        {lat: -<span style="color:#c53929">35.304724</span>, lng: <span style="color:#c53929">148.662905</span>},
        {lat: -<span style="color:#c53929">36.817685</span>, lng: <span style="color:#c53929">175.699196</span>},
        {lat: -<span style="color:#c53929">36.828611</span>, lng: <span style="color:#c53929">175.790222</span>},
        {lat: -<span style="color:#c53929">37.750000</span>, lng: <span style="color:#c53929">145.116667</span>},
        {lat: -<span style="color:#c53929">37.759859</span>, lng: <span style="color:#c53929">145.128708</span>},
        {lat: -<span style="color:#c53929">37.765015</span>, lng: <span style="color:#c53929">145.133858</span>},
        {lat: -<span style="color:#c53929">37.770104</span>, lng: <span style="color:#c53929">145.143299</span>},
        {lat: -<span style="color:#c53929">37.773700</span>, lng: <span style="color:#c53929">145.145187</span>},
        {lat: -<span style="color:#c53929">37.774785</span>, lng: <span style="color:#c53929">145.137978</span>},
        {lat: -<span style="color:#c53929">37.819616</span>, lng: <span style="color:#c53929">144.968119</span>},
        {lat: -<span style="color:#c53929">38.330766</span>, lng: <span style="color:#c53929">144.695692</span>},
        {lat: -<span style="color:#c53929">39.927193</span>, lng: <span style="color:#c53929">175.053218</span>},
        {lat: -<span style="color:#c53929">41.330162</span>, lng: <span style="color:#c53929">174.865694</span>},
        {lat: -<span style="color:#c53929">42.734358</span>, lng: <span style="color:#c53929">147.439506</span>},
        {lat: -<span style="color:#c53929">42.734358</span>, lng: <span style="color:#c53929">147.501315</span>},
        {lat: -<span style="color:#c53929">42.735258</span>, lng: <span style="color:#c53929">147.438000</span>},
        {lat: -<span style="color:#c53929">43.999792</span>, lng: <span style="color:#c53929">170.463352</span>}
      ]
    <span style="color:#3b78e7"></script></span>
    <span style="color:#d81b60"><!-- Replace following script src --></span>
    <span style="color:#3b78e7"><script</span> <span style="color:#9c27b0">src</span>=<span style="color:#0d904f">"/maps/documentation/javascript/examples/markerclusterer/[email protected]"</span><span style="color:#3b78e7">></span>
    <span style="color:#3b78e7"></script></span>
    <span style="color:#3b78e7"><script</span> <span style="color:#9c27b0">async</span> <span style="color:#9c27b0">defer</span>
    <span style="color:#9c27b0">src</span>=<span style="color:#0d904f">"https://maps.googleapis.com/maps/api/js?key=</span>YOUR_API_KEY<span style="color:#0d904f">&callback=initMap"</span><span style="color:#3b78e7">></span>
    <span style="color:#3b78e7"></script></span>
  <span style="color:#3b78e7"></body></span>
<span style="color:#3b78e7"></html></span></span>

単純な例として、このチュートリアルは、使用locationsマップに追加タグのセットの配列を。あなたは、マップマーカーを得るために、他のソースを使用することができます。詳細については、およそ読みくださいタグの作成ガイドを。

マーククラスタリングを学びます

MarkerClustererPlusライブラリのグリッドベースのクラスタリング技術は、特定のサイズ（各ズームレベルのためにサイズが変更されます）、およびグリッドにパケットをマークし、それぞれの正方形の正方形にマップされます。これは、マークがクラスタとの境界に追加され、特定のマークでクラスタを作成します。マップのズームレベルが最も近いマークすべてのタグベースのクラスタグリッドに割り当てられることになるまで、このプロセスを繰り返します。複数のクラスタ内の既存の数字の範囲ならば、Maps JavaScript APIのは、マーカーの各クラスタへの距離を決定し、最も近いクラスタに追加します。

あなたは、設定することができMarkerClusterer、そこに含まれるすべてのタグの間の平均距離を反映するために、クラスタの位置を調整するためのオプションを選択します。また、カスタマイズすることができMarkerClusterer、メッシュサイズ、クラスタのアイコン、テキストおよび他のクラスタなどの他のパラメータを変更します。

クラスタリングは、タグを追加することです

次のようにマークされているクラスタを追加してください：

あなたのアプリケーションがアクセスできるサーバー上のタグライブラリを取得し、GitHubのから画像を収集し、格納します。
JavaScriptライブラリや画像ファイルGitHubの上にあるMarkerClustererの Googleマップリポジトリ。GitHubのから以下のファイルをダウンロードするか、それはあなたのアプリケーションの缶アクセスの場所にコピーします。
- m1.png
- m2.png
- m3.png
- m4.png
- m5.png

あなたのページを収集するために、タグライブラリを追加します。

このチュートリアルのコードでは、次のスクリプトは、ロードするMarkerClustererPlusライブラリを。

<span style="color:#37474f"><span style="color:#3b78e7"><script</span> <span style="color:#9c27b0">src</span>=<span style="color:#0d904f">"https://unpkg.com/@google/[email protected]/dist/markerclustererplus.min.js"</span><span style="color:#3b78e7">></span>
</span>

アプリケーション内のタグのクラスタを追加します。
次のコードは、マップマーカークラスタに追加されます。
```
var markerCluster = new MarkerClusterer(map, markers,
            {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});

```
この例markersに配列MarkerClusterer。また、imagePathすべての5つの画像ファイルのパラメータの位置を指定します。同じパスの画像ファイルの保存場所を交換します。

lwbsleep

公開された10元の記事・ウォンの賞賛0 ・ビュー10000 +

プライベートの手紙の懸念

公式API-をクラスタリング3、Googleマップのマーカー

クラスターマーク

概要

それを自分を試してみてください

マーククラスタリングを学びます

クラスタリングは、タグを追加することです

おすすめ