How to use Baidu Map API in vue project

<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 function var map = new BMap.Map("map"); // Create a Map instance map.centerAndZoom(new BMap.Point(104.07258, 30.550701), 20); // Initialize the map, set the center point coordinates and map level // Add a map type control map.addControl(
   new BMap.MapTypeControl({
     mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP],
   })
);
map.setCurrentCity("Chengdu"); //Set the city displayed on the map. This item must be set.map.enableScrollWheelZoom(true);

let point = new BMap.Point(104.07258, 30.550501);
// Create a point marker var marker = new BMap.Marker(point);
// Add a point marker to the map map.addOverlay(marker);
// Create information window var opts = {
  width: 200,
  height: 100,
  title: "Popup title",
};
var infoWindow = new BMap.InfoWindow(
  "Popup content",
  opts
);
// Add click event to the marker marker.addEventListener("click", function () {
  map.openInfoWindow(infoWindow, point); // Open the information window });

//Set text mark var opts2 = {
  position: point, // Specify the geographic location of the text annotation offset: new BMap.Size(30, -30), // Set the text offset };
// Create a text annotation object var label = new BMap.Label("Chengdu Shulun Technology Co., Ltd.", opts2);
// Custom text annotation style label.setStyle({
  color: "blue",
  borderRadius: "5px",
  borderColor: "#ccc",
  padding: "10px",
  fontSize: "16px",
  height: "50px",
  lineHeight: "30px",
  fontFamily: "Microsoft YaHei",
});
map.addOverlay(label);