目次
1.百度開発者認定
Baidu マップ オープン プラットフォームの公式 Web サイトにアクセスします (認証にはID 番号、顔認識、携帯電話の Baidu APP、電子メール アドレスが必要です)。
登録とログインが完了すると、コンソールで開発者認証を行うことができます。
2. アプリケーションを作成する
アプリケーション管理でアプリケーションを作成できます. アプリケーション タイプはブラウザ側である必要があります. リファラー ホワイトリストがテスト バージョンのみの場合, 最初に * を使用できます. ホワイトリスト内の Web サイトのみが通話を正常に開始できます.
作成が完了すると、AK が生成されます。
3. Baidu マップ API ファイルの参照
JavaScript Open Documentationにチュートリアルがあり、チュートリアルに従って参照できます。
vue で使用する場合は、このコード セグメントを html ファイルに配置する必要があります。
<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&&type=webgl&ak=您的密钥">
</script>内部の ak 値を変更する必要があります。これは、上記で作成したアプリケーションによって生成された ak 値です。
4.地図を表示する
地図を表示するためのデモもあります。
vueのindex.htmlにAPIを導入すれば、プロジェクトで利用できます。
var map = new BMapGL.Map("container"); // 创建地图实例
var point = new BMapGL.Point(116.404, 39.915); // 创建点坐标
map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别
これは使用例です。注意すべき点がいくつかあります。
- このコードを Mounted ライフサイクルに入れます。
- マップを表示するインスタンスを取得するには、ref を使用して取得できます。
- マップを表示するインスタンスの幅と高さを設定します。
- 作成点の座標は変更できます。
ここまでで、Baidu マップ API の簡単な使用が完了しました。