Vue プロジェクトで Baidu Map API を使用する方法

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

<div id="map" class="map"></div>

// Baidu Map API 関数 var map = new BMap.Map("map"); // Map インスタンスを作成 map.centerAndZoom(new BMap.Point(104.07258, 30.550701), 20); // マップを初期化し、中心点の座標とマップ レベルを設定 // マップ タイプ コントロールを追加 map.addControl(
   新しい BMap.MapTypeControl({
     マップタイプ: [BMAP_NORMAL_MAP、BMAP_HYBRID_MAP]、
   })
);
map.setCurrentCity("Chengdu"); //地図上に表示される都市を設定します。この項目は set.map.enableScrollWheelZoom(true); にする必要があります。

ポイントを新しいBMap.Point(104.07258, 30.550501)とします。
// ポイントマーカーを作成します。var marker = new BMap.Marker(point);
// マップにポイントマーカーを追加します。map.addOverlay(marker);
// 情報ウィンドウを作成する var opts = {
  幅: 200,
  高さ: 100,
  title: "ポップアップタイトル",
};
var infoWindow = 新しい BMap.InfoWindow(
  「ポップアップコンテンツ」、
  オプション
);
// マーカーにクリックイベントを追加する marker.addEventListener("click", function () {
  map.openInfoWindow(infoWindow, point); // 情報ウィンドウを開きます });

//テキストマークを設定する var opts2 = {
  position: point, // テキスト注釈の地理的位置を指定します offset: new BMap.Size(30, -30), // テキストのオフセットを設定します };
// テキスト注釈オブジェクトを作成します。 var label = new BMap.Label("Chengdu Shulun Technology Co., Ltd.", opts2);
// カスタムテキスト注釈スタイル label.setStyle({
  色:「青」、
  境界半径: "5px",
  境界線の色: "#ccc",
  パディング: "10px",
  フォントサイズ: "16px",
  高さ: "50px",
  行の高さ: "30px",
  フォントファミリー: "Microsoft YaHei",
});
map.addOverlay(ラベル);