Gaode マップを Vue プロジェクトに導入する詳細な手順

Gaode Map API公式ウェブサイト: Gaode Open Platform | Gaode Map API。

1. ケース効果

2. 開発準備

1. Gaodeオープンプラットフォームアカウントを登録する

2. アプリケーションを作成し、キー値を追加します

3. プロジェクトでマップコンポーネントを使用する

1.npmでAmap APIを取得

2. プロジェクト内に新しい MapContainer.vue ファイルをマップコンポーネントとして作成します。

3. MapContainer.vue マップコンポーネントにマップコンテナとして div タグを作成し、マップコンテナの id 属性をcontainerに設定します。

4. マップ初期化関数 initMap を定義し、次のように呼び出します。

5. 完全なコード + 詳細なコメント:

4. オーバーレイ、レイヤー、プラグイン、イベントなどの属性をマップに追加します。

1. レイヤーを追加する

2. 地図上でプラグインを使用する（マップコントロール）

3. その他の設定

1. ケース効果

ポリゴンスナップ

2. 開発準備

なお、JS APIを利用する場合はアカウントを登録し、キー値を取得する必要があります。

1. Gaodeオープンプラットフォームアカウントを登録する

個人情報を入力するだけで登録できます。

2. アプリケーションを作成し、キー値を追加します

登録が成功したら、コンソールに入り、「Create New Application」をクリックします。

名前、アプリケーション名、タイプを入力すると、作成されたアプリケーションが表示されます。

次に、「追加」をクリックしてアプリケーションのキー値を追加します。

ここでは Web 側 (JS API) を選択する必要があることに注意してください。

「送信」をクリックすると、キー値が正常に取得されます。

3. プロジェクトでマップコンポーネントを使用する

1.npmでAmap APIを取得

まず、Vue プロジェクトでコマンドを渡します。

npm  i   @amap/amap-jsapi-loader --save

Amap API を取得する; ダウンロードが成功すると、独自のプロジェクトで Map API を使用できるようになります。

2. プロジェクト内に新しい MapContainer.vue ファイルをマップコンポーネントとして作成します。

3. MapContainer.vue マップコンポーネントにマップコンテナとして div タグを作成し、マップコンテナの id 属性をcontainerに設定します。

<template>
  <!--地图容器-->
  <div id="container"></div>
</template>
 
<script>
  export default {
    name: "gaode"
  }
</script>
 
<style scoped>
  #container {
    width: 80%;
    height: 400px;
    margin: 100px auto;
    border: 2px solid red;
  }
</style>

vue2 メソッド (このメソッドは以下の例として使用されます):

<script>
  import AMapLoader from '@amap/amap-jsapi-loader'; //引入
 
  export default {
    name: "gaode",
    data() {
      return {
        map: null //初始化 map 对象
      }
    }
  }
</script>

vue3 の方法:

<script>
  import {shallowRef} from '@vue/reactivity' //引入
 
  export default {
    name: "gaode",
    setup() {
      const map = shallowRef(null);
      return {
        map,
      }
    },
  }
</script>

4. マップ初期化関数 initMap を定義し、次のように呼び出します。

methods: {
      initMap() {
        AMapLoader.load({
          key: "ed2ea36f8564541569c370254845d93d", //此处填入我们注册账号后获取的Key
          version: "2.0", //指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
          plugins: [''], //需要使用的的插件列表，如比例尺'AMap.Scale'等
        }).then((AMap) => {
          this.map = new AMap.Map("container", { //设置地图容器id
            viewMode: "3D", //是否为3D地图模式
            zoom: 5, //初始化地图级别
            center: [105.602725, 37.076636], //初始化地图中心点位置
          });
        }).catch(e => {
          console.log(e);
        })
      },
    },
    mounted() {
      //挂载阶段调用，DOM初始化完成进行地图初始化
      this.initMap();
    }

5. 完全なコード + 詳細なコメント:

<template>
  <div>
    <div id="container"></div>
  </div>
</template>
 
<script>
  import AMapLoader from '@amap/amap-jsapi-loader';
 
  export default {
    name: "gaode",
    data() {
      return {
        map: null //初始化 map 对象
      }
    },
    methods: {
      initMap() {
        AMapLoader.load({
          key: "ed2ea36f8564541569c370254845d93d", //此处填入我们注册账号后获取的Key
          version: "2.0", //指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
          plugins: [''], //需要使用的的插件列表，如比例尺'AMap.Scale'等
        }).then((AMap) => {
          this.map = new AMap.Map("container", { //设置地图容器id
            viewMode: "3D", //是否为3D地图模式
            zoom: 5, //初始化地图级别
            center: [105.602725, 37.076636], //初始化地图中心点位置
          });
        }).catch(e => {
          console.log(e);
        })
      },
    },
    mounted() {
      //DOM初始化完成进行地图初始化
      this.initMap();
    }
  }
</script>
 
<style>
  #container {
    width: 80%;
    height: 400px;
    margin: 100px auto;
    border: 1px solid red;
  }
</style>

4. オーバーレイ、レイヤー、プラグイン、イベントなどの属性をマップに追加します。

最初の 3 つのステップの構成後、基本的な AutoNavi マップが形成されますが、これは実際のアプリケーションでは明らかに十分ではなく、プロジェクトには多くの要求が存在します。したがって、スタイルを変更する場合、またはレイヤー、ポイントマーカー、クリックイベントなどの他のプロパティをマップ上に追加する場合は、 **this.map = new AMap.Map("container", 関連するコードを追加するだけです{ }** と同じレベルです。

いくつか例を挙げてみましょう。

1. レイヤーを追加する

デフォルトでは、マップには標準のベースマップのみが表示されます。他のレイヤーをオーバーレイする必要がある場合は、map.add メソッドを使用してレイヤーを追加できます。次のように、衛星レイヤーTileLayer.Satelliteを追加してみます。

効果は次のようになります。元の地図が衛星地図になります。

2. 地図上でプラグインを使用する（マップコントロール）

JS API は多くのプラグイン関数を提供しますが、これらの関数は JSAPI メインリソースと一緒に積極的に提供されるわけではなく、これらのプラグイン関数は使用する前に導入する必要があります。プラグインを使用する前に、各プラグインをプラグイン配列に導入し、addControl を使用してマップに追加する必要があります。

次のコードは、Layer Switching、Scale、Eagle Eye の 3 つのプラグインを追加します。

効果は次のとおりです。

3. その他の設定

この方法は上記で説明した方法とほぼ同じです。メソッドをマスターした後は、追加機能のセットアップは簡単です。その他のプロパティとプラグインについては、JS API 公式 Web サイトを参照してください: 概要-Map JS API v2.0 | Gaode Map API Gaode Open Platform 公式 Web サイト[こちらが写真017です]https: https://lbs.amap.com/api/jsapi-v2/summar