vue3中使用百度地图

1.在public/index.html中加入

<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=密钥">

2.创建一个vue组件

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

<script>
    export default {
        mounted() {
            let map = new window.BMapGL.Map('container');
            let point = new window.BMapGL.Point(116.404, 39.915);
            map.centerAndZoom(point, 18);
            map.enableScrollWheelZoom(true);
            let marker = new window.BMapGL.Marker(point); // 创建标注
            map.addOverlay(marker); // 将标注添加到地图中
            let scaleCtrl = new window.BMapGL.ScaleControl(); // 添加比例尺控件
            map.addControl(scaleCtrl);
            let zoomCtrl = new window.BMapGL.ZoomControl(); // 添加缩放控件
            map.addControl(zoomCtrl);
            let cityCtrl = new window.BMapGL.CityListControl(); // 添加城市列表控件
            map.addControl(cityCtrl);
        },
    }
</script>

<style scoped>
    .map {
        width: 100%;
        height: 100%;
    }
</style>

3.引用组件