vue-baidu-mapBaiduマップの使用

最近の開発では、緯度と経度を記録するために地図を使用する必要があるため、私は具体的に独自の使用方法を記述します。
リンク推奨
リンク1：vue-baidu-map公式ウェブサイト
リンク2：vue-baidu-mapドキュメント

1つ：プラグインのインストール

$ npm install vue-baidu-map --save

2：秘密鍵の登録

http://lbsyun.baidu.com/にログインします。2.1
左上隅のコンソールを
クリックします
。2.2管理アプリケーションでアプリケーションをクリックします
。2.3アプリケーションの作成をクリックします。2.4akを記録します（akはBaiduマップのキーです）。

3：プラグインの導入

3.1グローバル登録

import Vue from 'vue'
import BaiduMap from 'vue-baidu-map'
 
Vue.use(BaiduMap, {
    
    
  // ak 是在百度地图开发者平台申请的密钥
  ak: 'YOUR_KEY'
})

<template>
  <baidu-map class="bm-view">
  </baidu-map>
</template>
 
<style>
.bm-view {
     
     
  width: 100%;
  height: 300px;
}
</style>

3.2オンデマンドでインポート

オンデマンドでのインポートは比較的最良であり、コードメモリを削減します（コンポーネントについては5.3を参照してください）

import {
    
    BaiduMap, BmControl, BmView, BmAutoComplete, BmLocalSearch, BmMarker,BmNavigation} from 'vue-baidu-map'
 export default {
    
    
    components: {
    
    
      BaiduMap,
      BmControl,
      BmView,
      BmAutoComplete,
      BmLocalSearch,
      BmMarker,
      BmNavigation,
    },
    data：function(){
    
    
      return {
    
    
      }
    }
}

<baidu-map v-bind:style="mapStyle" class="bm-view" ak="YOUR_KEY"
      :center="center" 
      :zoom="zoom" 
      :min-zoom="minZoom"
      :scroll-wheel-zoom="true" 
      @click="getClickInfo">
        <bm-view style="width: 100%; height:500px;"></bm-view>
        <bm-marker :position="{lng: center.lng, lat: center.lat}" :dragging="true" animation="BMAP_ANIMATION_BOUNCE">
            <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
        </bm-marker>
        <bm-control :offset="{width: '10px', height: '10px'}">
          <bm-auto-complete v-model="keyword" :sugStyle="{
       
       zIndex: 999999}">
            <input type="text" placeholder="请输入大致位置" class="serachinput">
          </bm-auto-complete>
        </bm-control>
        <bm-local-search :keyword="keyword" :auto-viewport="true" style="width:0px;height:0px;overflow: hidden;"></bm-local-search>
      </baidu-map>

このときのレンダリングは以下のとおりです。

4：一般的な問題

4.1 BaiduMapコンポーネントコンテナ自体は空のブロックレベルの要素です。コンテナが高さを定義していない場合、Baiduマップは高さ0の非表示のコンテナにレンダリングされます。

4.2中心およびズームプロパティを設定していないマップコンポーネントは、マップレンダリングを実行しません。例外は、center属性が正当な地名文字列である場合です。これは、BaiduMapsが地名に応じてズーム値を自動的に調整するためです。

4.3 Baidu Map JS APIにはJSONPのロード方法しかないため、BaiduMapコンポーネントとそのすべてのサブコンポーネントのレンダリングは非同期にすることしかできません。したがって、コンポーネントのreadyイベントを使用して、マップAPIのロード後に実行できるコードを実行してください。Vue自体のライフサイクルでBMapクラスを呼び出そうとしないでください。もちろん、これらのモデルレイヤーを変更してください。回数。

5：属性

5.1インスタンス属性

属性名	の種類	デフォルト	説明
もし	ストリング		Baidu Map Developer Platformによって適用されるキーは、コンポーネントが部分的に登録されている場合にのみ宣言されます。
センター	ポイント、文字列		測位には、「広州海珠区」などの地域の文字列を使用するか、{lng：116.404、lat：39.915}などのオブジェクトを使用して緯度と経度を示すことができます。
ズーム	数		ズームレベル
最小ズーム	数		最小ズームレベル
最大ズーム	数		最大ズームレベル
高解像度	ブール値	true	ハイスコ​​ア画面モードこのアイテムは、マップコンポーネントがマウントされているときに一度だけロードされます
マップクリック	ブール値	true	マップコンポーネントがマウントされているときに、アイテムのクリックを1回だけ許可する
マップタイプ	ストリング	global.BMAP_NORMAL_MAP	マップタイプ
ドラッグ	ブール値	true	ドラッグアンドドロップを許可する
スクロールホイールズーム	ブール値	false	マウスホイールのズームを許可する
ダブルクリック-ズーム	ブール値	true	ダブルクリックしてズームできる
キーボード	ブール値	true	キーボード操作を許可する
慣性ドラッグ	ブール値	false	慣性抗力を許可する
連続ズーム	ブール値	false	無限ズームを許可する
ピンチしてズーム	ブール値	true	ピンチズームを許可する
自動サイズ変更	ブール値	true	適応コンテナサイズを許可する
mapStyle	MapStyle		カスタムマップスタイルのテーマ
テーマ	アレイ		mapStyle.styleJsonプロパティのエイリアスであるカスタムテーマは、次のメジャーバージョンで削除される可能性があるため、お勧めしません

5.2イベント

イベント名	パラメータ	説明
クリック	{タイプ、ターゲット、ポイント、ピクセル、オーバーレイ}	このイベントは、マップが左クリックされたときにトリガーされます。ダブルクリックすると、生成されるイベントのシーケンスは次のようになります。クリッククリックdblclick
dblclick	{タイプ、ターゲット、ピクセル、ポイント}	このイベントは、マウスがマップ上でダブルクリックされたときにトリガーされます
右クリック	{タイプ、ターゲット、ポイント、ピクセル、オーバーレイ}	このイベントは、マップが右クリックされたときにトリガーされます。ダブルクリックすると、生成されるイベントのシーケンスは次のようになります。右クリック右クリックrightdblclick
rightdblclick	{タイプ、ターゲット、ポイント、ピクセル、オーバーレイ}	このイベントは、マップを右クリックするとトリガーされます
maptypechange	{タイプ、ターゲット}	このイベントは、マップタイプが変更されたときにトリガーされます
mousemove	{タイプ、ターゲット、ポイント、ピクセル、オーバーレイ}	このイベントは、マウスがマップ領域内を移動しているときにトリガーされます
マウスオーバー	{タイプ、ターゲット}	このイベントは、マウスがマップ領域に移動したときにトリガーされます
マウスアウト	{タイプ、ターゲット}	このイベントは、マウスがマップ領域の外に移動したときにトリガーされます
movestart	{タイプ、ターゲット}	このイベントは、マップの移動が開始されたときにトリガーされます
引っ越し	{タイプ、ターゲット}	このイベントは、マップが移動しているときにトリガーされます
moveend	{タイプ、ターゲット}	このイベントは、マップの移動が終了したときにトリガーされます
ズームスタート	{タイプ、ターゲット}	このイベントは、マップのズームレベルが変更されたときにトリガーされます。
ズーミング	{タイプ、ターゲット}	地图更改缩放级别结束时触发触发此事件
addoverlay	{type, target}	当使用Map.addOverlay()方法向地图中添加单个覆盖物时会触发此事件
addcontrol	{type, target}	当使用Map.addControl()方法向地图中添加单个控件时会触发此事件
removecontrol	{type, target}	当使用Map.removeControl()方法移除单个控件时会触发此事件
removeoverlay	{type, target}	当使用Map.removeOverlay()方法移除单个覆盖物时会触发此事件
clearoverlays	{type, target}	当使用Map.clearOverlays()方法一次性移除全部覆盖物时会触发此事件
dragstart	{type, target, pixel, point}	开始拖拽地图时触发
dragging	{type, target, pixel, point}	拖拽地图过程中触发
dragend	{type, target, pixel, point}	停止拖拽地图时触发
addtilelayer	{type, target}	添加一个自定义地图图层时触发此事件
removetilelayer	{type, target}	移除一个自定义地图图层时触发此事件
load	{type, target, pixel, point, zoom}	调用Map.centerAndZoom()方法时会触发此事件。这表示位置、缩放层级已经确定，但可能还在载入地图图块
resize	{type, target, size}	地图可视区域大小发生变化时会触发此事件
hotspotclick	{type, target, spots}	点击热区时触发此事件
hotspotover	{type, target, spots}	鼠标移至热区时触发此事件
hotspotout	{type, target, spots}	鼠标移出热区时触发此事件
tilesloaded	{type, target}	当地图所有图块完成加载时触发此事件
touchstart	{type, target, point,pixel}	触摸开始时触发此事件，仅适用移动设备
touchmove	{type, target, point,pixel}	触摸移动时触发此事件，仅适用移动设备
touchend	{type, target, point,pixel}	触摸结束时触发此事件，仅适用移动设备
longpress	{type, target, point,pixel}	长按事件，仅适用移动设备

5.3各种功能组件

可以根据需求，按需导入以下的组件

事件名	属性	描述
BaiduMap	地图盒子	vueでBaiduマップを紹介します
BmScale	スケールバーコントロール	マップにスケールコントロールを追加します
BmNavigation	ズームコントロール	マップにスケールコントロールを追加します
BmMapType	マップタイプコントロール	マップにスケールコントロールを追加します
BmOverviewMap	サムネイルコントロール	マップにスケールコントロールを追加します
BmGeolocation	ポジショニング制御	マップにスケールコントロールを追加します
BmCopyright	著作権管理	マップにスケールコントロールを追加します
BmCityList	都市選択管理	地図に都市の選択を追加する
BmPanorama	パノラマコントロール	地図にパノラマを追加する
BmControl	カスタムコントロール	マップにカスタマイズを追加する
BmMarker	ドットカバー	地図の中央にポイントマーカーを追加します
BmPointCollection	大規模なドットカバー	地図上に複数のポイントマーカーを追加する
BmPolyline	ポリラインカバー	編集可能なポリラインをマップに追加します
BmPolygon	多角形のカバー	編集可能なポリゴンをマップに追加します
BmCircle	ラウンドカバー	マップに円を追加します
BmGround	グランドカバー	マップにグラウンドレイヤーを追加します
BmLabel	ラベルカバー	マップにカスタムテキストラベルを追加する
BmInfoWindow	情報フォームオーバーレイ	地図に情報フォームを追加する
BmOverlay	カスタムオーバーレイ	カスタムカバーコンポーネントは高度にカスタマイズされたコンポーネントです
BmLocalSearch	地域検索	マップインスタンスの領域を取得します
BmTransit	バス路線計画	AAからBBへのバスルート計画を取得する
BmWalking	ウォーキングルートプランニング	AAからBBまでのウォーキングルートプランを取得する
BmDriving	走行経路計画	AAからBBへの運転ルート計画を照会します
BmBus	バス路線検索	深センXXバス路線のルートを照会する
BmContextMenu	コンテキストメニュー	マップにコンテキストメニューを挿入します
BmContextMenuItem	メニュー項目	メニュー項目は右クリックメニューのサブコンポーネントです。他のコンポーネントでは使用しないでください。
BmBoundary	行政区画	深セン市南山区の行政区画を地図に追加
BmAutoComplete	自動入力	キーワードを入力すると、コンテンツが自動的に入力されます