ホームページ > 記事 > ウェブフロントエンド > Baidu Map の jsApi を vue.js に導入するにはどうすればよいですか? Baidu MapのjsApiを導入する2つの方法を紹介

Baidu Map の jsApi を vue.js に導入するにはどうすればよいですか? Baidu MapのjsApiを導入する2つの方法を紹介

不言オリジナル: 2018-07-27 10:56:271736ブラウズ

この記事では、vue.js に百度地図の jsApi を導入する方法についての記事の内容を紹介します。 Baidu Map の jsApi を導入する 2 つの方法の紹介は、困っている友人に役立つことを願っています。

前書き

今日、Baidu Mapを使用する必要があるプロジェクトがあります。通常、モバイル端末でBaidu Mapを使用する場合、この方法でBaidu MapのjsApiを直接導入します。

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=D9b45bc6f98deafc489e9ac1bc7f7612"></script>

このメソッドの原理は、BMap オブジェクトをグローバルウィンドウオブジェクトに直接追加することです。これにより、API が読み込まれているページ上のどこでも Baidu Map API を使用できるようになります。しかし、単一ファイルのコンポーネントを使用して vue+webpack で開発されたプロジェクトの場合、導入方法だけでは明らかに十分ではありません。そこで、ネットで情報を調べてみました。ここには 2 つの方法があります。

スクリプトタグを直接導入する

最初の方法は、スクリプトタグを直接導入するだけでは十分ではありません。vue ファイルで bmap オブジェクトを使用したい場合は、webpack 設定で外部拡張子を設定する必要もあります。ファイル ( externals 属性)

//webpack.dev.conf.js

externals: {
    'BaiduMap': 'BMap'
}

externales 属性は、公式の説明から来ています:

特定のインポートされたパッケージがバンドルにパッケージ化されるのを防ぎ、代わりに実行時 (ランタイム) にこれらの外部依存関係を取得します。

webpack のドキュメントには、パッケージ化する代わりに CDN から jQuery をインポートする例も示されています。
index.html

<script
  src="https://code.jquery.com/jquery-3.1.0.js"
  integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk="
  crossorigin="anonymous">
</script>

webpack.config.js

externals: {
  jquery: 'jQuery'
}

import $ from 'jquery';

$('.my-element').animate(...);

この例を参照すると、js ファイルをプロジェクトに導入することで、Baidu Map の API を直接使用できます。

import BaiduMap from 'BaiduMap'
export default {
    name: 'Index',
    .....

mounted() {
        
    var map = new BaiduMap.Map('allmap')                        // 创建地图实例
    var point = new BaiduMap.Point(120.343373,31.540212)        // 创建中心点坐标
    var marker = new BaiduMap.Marker(point) // 创建标注

    map.centerAndZoom(point,15)                         // 初始化地图，设置中心点坐标和地图级别


    map.addOverlay(marker) // 将标注添加到地图中

}

ここで、dom が

<p id="allmap"></p>

などの公式サンプルを使用する場合、dom はマウントされたステージでのみ生成およびマウントされるため、マップ API のインスタンス化はマウントされたステージで行うのが最適であることに注意してください。

モジュール化によって導入された方法

実際、Baidu Maps は昨年、jsApi に基づいて vue と React の対応するオープンソースコンポーネントを正式にオープンソース化し、npm を通じて直接インストールして使用することができます。
VUE:[https://github.com/Dafrok/vue...]
React:[https://github.com/huiyan-fe/...]
使用するにはgithub上のドキュメントを参照できます。ここではvueのみを紹介します。
インストール

npm i vue-baidu-map --save

初期化

import Vue from 'vue'
import BaiduMap from 'vue-baidu-map'

Vue.use(BaiduMap, {
  ak: 'YOUR_APP_KEY'    //这个地方是官方提供的ak密钥
})

使用

<template>
  <baidu-map class="map">
  </baidu-map>
</template>

<style>
/* The container of BaiduMap must be set width & height. */
.map {
  width: 100%;
  height: 300px;
}
</style>

Baidu Map の jsApi を vue.js に導入するにはどうすればよいですか? Baidu MapのjsApiを導入する2つの方法を紹介

前書き

スクリプト タグを直接導入する

モジュール化によって導入された方法

関連記事

スクリプトタグを直接導入する