百度地图的实现

申请自己的ak

1在百度地图开放平台官网百度地图开放平台 | 百度地图API SDK | 地图开发 (baidu.com)，进行实名认证，然后“应用管理”->“我的应用”->“创建应用”

2输入应用名称，应用类型，ip白名单可设置为*或者0.0.0.0

3创建成功

4复制生成的ak密钥

使用

1点击首页“开发文档”=》“JavaScriptAPI”

2找到“创作地图”=》“展示地图”

在自己项目的index.html中添加API文件，把刚才的ak密钥替换代码中的“您的密钥”

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

在ui文件中设置一个用来展示地图的元素，并取一个类名，用来标记在何处使用地图

 <div class="baidu" ref="mapRef">

  </div>

使用onMounted确保放置地图的元素别渲染过后才开始创建地图

import { onMounted,ref } from 'vue';
    const mapRef=ref()
    onMounted(() => {
        const map = new BMapGL.Map(mapRef.value);          // 创建地图实例 
        const point = new BMapGL.Point(props.position.longitude, props.position.latitude);  // 创建点坐标 
        map.centerAndZoom(point, 15);                 // 初始化地图，设置中心点坐标和地图级别
        var marker = new BMapGL.Marker(point);        // 创建标注   
        map.addOverlay(marker);                     // 将标注添加到地图中
    })

这样，一个地图的功能就实现了

同时，你还可以在开发文档中添加其他选项，比如覆盖物，动态效果等等