百度地图API的简单使用（vue3）

以下地图API的使用是在vue3中进行使用，也可在其他框架中使用，可能只是路由引入的方式不同（div盒子的创建，生成地图的方法，生成点标记的方法，生成信息窗口的方法皆一致）

1、在框架中要找到入口文件并将一下代码引入其中（html直接引入即可）

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

密钥申请详见：(20条消息) 使用百度地图API申请密钥流程_DT_11的博客-CSDN博客

2、创建一个div，给定id名，给定宽高，将以下代码复制进去即可

//需引入import {useRouter} from 'vue-router'
//方法外定义const router = useRouter()

//可以直接定义一个方法将以下代码包裹起来，再onMounted中进行调用即可

//content就是id名为content的div盒子
var map = new BMapGL.Map("content");
var point = new BMapGL.Point(116.404, 39.915);
map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
map.centerAndZoom('北京', 9); 

//obj.storelist是请求的数据，为array类型，里面是一个或多个object。
obj.storelist.forEach((item,index)=>{
    // 创建点标记
    //longitude和latitude分别是数据中的精度和纬度
    var point1 = new BMapGL.Point(item.longitude,item.latitude)
    var marker1 = new BMapGL.Marker(point1);
                
    // 在地图上添加点标记
    map.addOverlay(marker1);
    // 创建信息窗口
    var opts = {
        width: 200,
        height: 100,
    };
    //以下代码中InfoWindow方法中的第一个参数为信息窗口的信息
    var infoWindow = new BMapGL.InfoWindow(`<p>${item.warehouseName}</p> <a id="a${index}">${item.enterpriseid}</a>`, opts);

   // 点标记添加点击事件
   marker1.addEventListener('click', function () {
         map.openInfoWindow(infoWindow, point1); // 开启信息窗口
        //点击地图中的标记出现信息窗口，如果需要给窗口中的某条信息设置点击事件，需要以下这种方                        
             式进行设置（以下代码为：点击某条信息后进行路由跳转传参）
         document.querySelector(`#a${index}`).onclick = () => {
                 //router在vue3中是组合式接口，需要进行引入，在方法外引入useRouter进行实例化
                 router.push('/monitor/Warehouse?key='+item.enterpriseid)
         };
    });
})