So verwenden Sie die Baidu Map API im Vue-Projekt

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

<div id="Karte" Klasse="Karte"></div>

// Baidu Map API-Funktion var map = new BMap.Map("map"); // Eine Karteninstanz erstellen map.centerAndZoom(new BMap.Point(104.07258, 30.550701), 20); // Karte initialisieren, Mittelpunktkoordinaten und Kartenebene festlegen // Eine Kartentypsteuerung hinzufügen map.addControl(
   neues BMap.MapTypeControl({
     Kartentypen: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP],
   })
);
map.setCurrentCity("Chengdu"); //Legen Sie die auf der Karte angezeigte Stadt fest. Dieses Element muss festgelegt sein.map.enableScrollWheelZoom(true);

Lassen Sie Punkt = neuer BMap.Point(104.07258, 30.550501);
// Einen Punktmarker erstellen var marker = new BMap.Marker(point);
// Der Karte einen Punktmarker hinzufügen map.addOverlay(marker);
// Informationsfenster erstellen var opts = {
  Breite: 200,
  Höhe: 100,
  Titel: "Popup-Titel",
};
var infoWindow = neues BMap.InfoWindow(
  „Popup-Inhalt“,
  Optionen
);
// Klickereignis zum Marker hinzufügen marker.addEventListener("click", function () {
  map.openInfoWindow(infoWindow, point); // Öffne das Informationsfenster });

//Textmarkierung setzen var opts2 = {
  Position: Punkt, // Geben Sie den geografischen Standort der Textanmerkung an. Offset: neue BMap.Size(30, -30), // Legen Sie den Textoffset fest };
// Ein Textanmerkungsobjekt erstellen var label = new BMap.Label("Chengdu Shulun Technology Co., Ltd.", opts2);
// Benutzerdefinierter Textanmerkungsstil label.setStyle({
  Farbe: "blau",
  Rahmenradius: "5px",
  Rahmenfarbe: "#ccc",
  Polsterung: "10px",
  Schriftgröße: "16px",
  Höhe: "50px",
  Zeilenhöhe: "30px",
  fontFamily: "Microsoft YaHei",
});
map.addOverlay(Beschriftung);