index.htmlの中加入スクリプト
ます。<script type = "text / javascriptの" SRC = "http://api.map.baidu.com/api?v=3.0&ak=2GRZTukOKUxe25P86mqjHuR1mTahwueb"> </ SCRIPT>
新map.vue
<テンプレート>
<DIV ID = "allmap"
クラス= "地図" />
</テンプレート>
<スクリプト>
/ * * eslintディセーブル/
エクスポートデフォルト{
名： 'Mapbox'、
データ（）{
リターン{
}
}、
マウント：機能（）{
。nextTickこの$（（）=> {
VAR新しい新しいBMap.Map地図=（ "allmap"）; //マップ、結合= allmap IDを初期化する
VARをBMap.Point新しい新しいポイント=（ 121.48789949、31.24916171）; //デフォルトのX与えられ、ポイントを初期化し、yは値
map.centerAndZoom（点、10）; //ポイントにマップを指すように、ディスプレイに表示されたページの中心、ズームレベル= 10
map.enableScrollWheelZoom （）; //マウスホイールスクロール開く
インターフェースの後端に係るベース渡されてもよい、場合複数を表示する//ポイントを
データ=を聞かせて[
{X：116.297047、Y：39.979542 、名称： ' ジョン・ドウ'}、
{X：116.321768、Y：39.88748、名称： 'ジョン・ドウ'}、
{X：116.494243、Y：39.756539、名称：「王ウー「}
]
data.forEach（（E、I）=> {
//ポイントを作成し、X、Yに渡される値
せPOINTNUMBER =新しい新しいBMap.Point（EX、EY）は
//ウィンドウオブジェクトを作成する
情報ウィンドウ=新しいBMap.InfoWindowを聞かせ（「世界」、{
幅：150、//ウィンドウ幅情報
高さ：100、//ウィンドウの高さ情報
タイトル：「こんにちは」+ I //ウィンドウタイトル情報
}）;
//データはマップ名に追加される
VAR = BMap.Label新しい新しいラベル（e.name、{
オフセット：新しい新しいBMap.Size（25 ,. 5）
}）。
markerFun（POINTNUMBER、情報ウィンドウ、ラベル）
}）
関数markerFun（ポイント、情報ウィンドウ、ラベル）{
LET =新しい新規マーカーBMap.Marker（ポイント）;
Map.addOverlay（マーカー）; //を地図に追加することは、ラベル
（markers.setLabelをラベル）; //がでマップ名にデータを追加し
、クリックイベント//マーク
markers.addEventListener（「クリック」、機能（イベント）{
map.openInfoWindow（情報ウィンドウ、ポイント）; //パラメータ：ウィンドウ、ポイントに応じてポイントへのウィンドウをクリックした対応する
）;}
}
//現在位置取得
新しいBMap.Geolocation = VARジオロケーションは、新しい（）;
geolocation.getCurrentPosition（関数（R＆LT）{
IF（this.getStatus（）== BMAP_STATUS_SUCCESS）{
VaRのMK =新しいBMap.Marker（r.point）。
地図.addOverlay（MK）。
map.panTo（r.point）。
//警告（ '您的位置：' + r.point.lng + '' + r.point.lat）。
}他{
//警告（ '失敗' + this.getStatus（））;
}
}）。
}）
}、
メソッド：{
}
}
</ SCRIPT>
<スタイル>
.MAP {
高さ：CALC（100VH - 126px）。
幅：100％;
}
</スタイル>