<template>
    <div id="container"></div> //給地圖設(shè)置一個(gè)容器
</template>
 <script>
    ...
 </script>
  <style scoped>
      #container {
        width: 100% !important;
        height: 55vh !important;
        margin: 20px auto;
        overflow: hidden;
      }
  </style>

 import { defineComponent, onMounted } from 'vue';
 import { BMPGL } from '@/utils/bmpgl.js';
  export default defineComponent({
    props: {
      longitude: {
        default: '39.915',
        type: String
      },
      latitude: {
        default:'116.404',
        type: String
      },
      title: {
        default: '',
        type: String
      },
      reg_address:{
        default: '',
        type: String
      },
    },
    setup(props) {
      onMounted(() => {
        BMPGL('s5YsFdu79bjzphdfQK1mnqac1o8987EqxjW').then((BMapGL) => {
        // 百度地圖API功能
        var map = new BMap.Map('container'); // 創(chuàng)建地圖實(shí)例 
        var point = new BMap.Point(
            props.longitude,
            props.latitude,  
        );// 創(chuàng)建點(diǎn)坐標(biāo) ，
        map.centerAndZoom(new BMap.Point(props.longitude,props.latitude), 2); 
            //初始化地圖，設(shè)置中心點(diǎn)坐標(biāo)和地圖級(jí)別
        var marker = new BMap.Marker(point); // 創(chuàng)建標(biāo)注
        map.addOverlay(marker); // 將標(biāo)注添加到地圖中
        var opts = {
          width: 200, // 信息窗口寬度
          height: 100, // 信息窗口高度
          title: props.title // 信息窗口標(biāo)題
        };
        map.enableScrollWheelZoom(true); //開啟鼠標(biāo)滾輪縮放
        var infoWindow = new BMap.InfoWindow(
          props.reg_address,
          opts
        ); // 創(chuàng)建信息窗口對(duì)象
        marker.addEventListener('click', function () {
          map.openInfoWindow(infoWindow, point); //開啟信息窗口
        });
      });
      });
      return{
      }
    }
  });

var scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件
map.addControl(scaleCtrl);
var zoomCtrl = new BMapGL.ZoomControl();  // 添加縮放控件
map.addControl(zoomCtrl);
var cityCtrl = new BMapGL.CityListControl();  // 添加城市列表控件
map.addControl(cityCtrl);
var LocationControl= new BMapGL.LocationControl();  // 添加定位控件，用于獲取定位
map.addControl(LocationControl);
var CopyrightControl= new BMapGL.CopyrightControl();  // 添加版權(quán)控件，用于展示版權(quán)信息
map.addControl(CopyrightControl);