Vue を使用した Amap アプリケーション開発のベスト プラクティス

const loadScripts = 非同期スクリプト => {
  const get = src => {
    新しいPromise(function(resolve,reject)を返す{
      定数el = document.createElement('script')
      el.addEventListener('load', 関数() {
        解決(ソース)
      }、 間違い）
      el.addEventListener('エラー', 関数() {
        拒否(ソース)
      }、 間違い）
      el.id = src.id
      el.src = src.url
      document.getElementsByTagName('body')[0].appendChild(el) || document.getElementsByTagName('head')[0].appendChild(el)
    })
  }

  const myPromises = scripts.map(非同期スクリプト => {
    document.getElementById(script.id) が null の場合 {
      戻り、get(スクリプト)を待ちます
    }
  })

  Promise.all(myPromises) を待機して戻ります。
}

デフォルトのロードスクリプトをエクスポートする

<テンプレート>
  <div
    :style="{
      幅: 幅、
      高さ: 高さ
    }"
    クラス="amap-container"
  >
    <div ref="amap" class="amap">
      <スロット />
    </div>
  </div>
</テンプレート>

<style lang="scss" スコープ>
    .amapコンテナ{
    .amap {
        幅: 100%;
        高さ: 100%;
    }
    }
</スタイル>

'@/loadScripts' から loadScripts をインポートします
エクスポートデフォルト{
  名前: 'AMapContainer',
  小道具: {
    幅： {
      必須: 偽、
      タイプ: 文字列、
      デフォルト: '100%'
    },
    身長：
      必須: 偽、
      タイプ: 文字列、
      デフォルト: '600px'
    },
    オプション:
      必須: 偽、
      タイプ: オブジェクト、
      デフォルト: () => {}
    }
  },
  データ: () => ({
    amap: null、
    マップ情報:
      キー: 'xxxxxxxxxxxxxxx'
    }
  }）、
  作成された() {
    この.initAMap()
  },
  破棄する前に() {
    // マップを破棄する if (!this.amap) {
      戻る
    }
    this.amap.destroy()
    this.amap = null
  },
  メソッド: {
    マップを初期化する（）{
      ロードスクリプト([{
        id: 'ampa',
        URL: `https://webapi.amap.com/maps?v=2.0&key=${this.amapInfo.key}&plugin=AMap.PolygonEditor`
      }]).then(() => {
        this.amap = 新しいウィンドウ.AMap.Map(this.$refs['amap'], this.options)
        this.$emit('map', this.amap, window.AMap)
      })
    }
  }
}

<テンプレート>
    <amap-container の高さ="100%" :options="amapOptions" @map="getAMapData" />
</テンプレート>

<スクリプト>
    '@/components/AMap' から AMap をインポートします。

    エクスポートデフォルト{
        名前: 'AMapDemo',
        コンポーネント:
            'amap-container': AMap
        },
        データ: () => ({
            マップオプション: {
                ズーム: 14,
                サイズ変更を有効にする: true、
                表示モード: '3D',
                マップスタイル: 'amap://styles/normal'
            },
            AMap: null, // マップ オブジェクト amap: null // 現在のマップ インスタンス }),
        メソッド: {
            /**
             * マップ読み込み完了コールバック* @param amap
             * @param マップ
             */
            AMapData を取得します (amap, AMap) {
                // コンポーネントからマップ amap オブジェクトを取得します。this.amap = amap
                // コンポーネントからマップの AMap 静的オブジェクトを取得します。this.AMap = AMap
            }
        }
    }
</スクリプト>

'./components/ContextCard' から ContextCard をインポートします。

// マーカーを作成する const marker = new this.AMap.Marker({
  マップ: this.amap,
  位置: [119.058904, 33.537069]
})
// クリックイベントをバインド marker.on('click', this.markerInfoWindow)

// クリックするとポップアップウィンドウが開きます const markerInfoWindow = () => {
  //Vue コンポーネント コンストラクターのインスタンス化を導入する const ContextCardContent = Vue.extend(ContextCard)
  // マウントコンポーネント const contextCardContent = new ContextCardContent().$mount()
  // ウィンドウオブジェクトをインスタンス化します this.amapInfoWindow = new this.AMap.InfoWindow({
    isCustom: true、
    コンテンツ: contextCardContent.$el、
    オフセット: 新しい this.AMap.Pixel(0, -40)
  })
  // ウィンドウを開く this.amapInfoWindow.open(this.amap, marker.getPosition())
  // ウィンドウを閉じるためのコンポーネント イベントをリッスンします contextCardContent.$on('closeWindow', () => this.amapInfoWindow.close())
}

<テンプレート>
  <el-card class="コンテキストボックスカード ボックスカード">
    <div スロット="ヘッダー" クラス="ヘッダー">
      <span>カード名</span>
      <el-button type="text" class="close-btn" @click="closeWindow">閉じる</el-button>
    </div>
    <div v-for="o in 4" :key="o" class="テキスト項目">
      {{ 'リストコンテンツ' + o }}
    </div>
  </el-card>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  名前: 'AMapContextCard',
  メソッド: {
    ウィンドウを閉じる() {
      this.$emit('closeWindow')
    }
  }
}
</スクリプト>

<style lang="scss" スコープ>
.コンテキストボックスカード{
  幅: 320ピクセル;
  高さ: 200px;

  .ヘッダー{
    ディスプレイ: フレックス;
    コンテンツの両端揃え: スペースの間;
    アイテムの位置を中央揃えにします。
  }

  ::v-deep .el-card__header {
    パディング: 5px 20px;
  }
}
</スタイル>

「vue」からVueをインポートします。
「./App.vue」からアプリをインポートします。

「element-ui」から要素をインポートします。

"normalize.css/normalize.css"をインポートします。
「element-ui/lib/theme-chalk/index.css」をインポートします。

Vue.config で productionTip を false に設定します。

Vue.use(要素);

新しいVue({
  レンダリング: (h) => h(App)
}).$mount("#app");