vue3中使用百度地图API

vue3中如何使用百度地图API？
一、注册账号、申请成为开发者

1. 打开百度地图开放平台，点击底部的 立即注册，注册账号
   
2. 通过百度账号注册成为百度地图开放平台开发者，选择开发者类型（个人/企业），完成开发者认证即可。

二、申请密钥AK
JavaScript API只支持浏览端的AK进行接入与访问，请开发者在申请AK时注意选择正确的AK类型
1.进入百度地图开放平台官网控制台，点击【应用管理】-【我的应用】

2. 点击【创建应用】进入AK申请页面，填写应用名称，务必选择AK类型为“浏览器端”，JS API只支持浏览器端AK进行请求与访问

三、在vue3.0中使用百度地图API
1.在index.html中引入script文件

<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=你生成的ak"></script>

2、在组件中进行使用

<template>
  <div class="about">
    <!-- 设置放置地图的ref -->
    <div id="map" class="mapp"></div>
  </div>
</template>

<script setup>
import {
    
     onMounted } from "vue";
// 百度地图BMap构造函数
let BMap = null;
onMounted(() => {
    
    
  BMap = window.BMap;
  var map = new BMap.Map("map"); // 创建地图实例
  var point = new BMap.Point(116.407, 39.915); // 创建点坐标
  map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别
  map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
  var marker = new BMap.Marker(point); // 创建标注
  map.addOverlay(marker); // 将标注添加到地图中
  var opts = {
    
    
    width: 100, // 信息窗口宽度
    height: 70, // 信息窗口高度
    title: "我爱北京天安门", // 信息窗口标题
  };
  var infoWindow = new BMap.InfoWindow(
    `<span>地址: 北京市东城区长安街<span>`,
    opts
  ); // 创建信息窗口对象
  map.openInfoWindow(infoWindow, map.getCenter()); // 打开信息窗口
});
</script>

<style scoped lang="scss">
.mapp {
    
    
  width: 600px;
  height: 500px;
}
</style>

3. demo展示