vue中地图页面

密钥:百度地图开放平台 | 百度地图API SDK | 地图开发 === 注册登录-控制台-应用管理-我的应用-创建应用(Ref白名单：*)-获取AK

在index.html文件中引入:<script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=您的密钥"></script>

在.vue界面

<template>
    <div id="map_box">
        地图开发
    </div>
</template>

<script setup lang='ts'>
// 导入页面权限
import { noPermission } from '@/utils/nopermission'
noPermission()
import { onMounted } from 'vue' 
onMounted(() => {
    // 01: 创建地图实例
    var map = new (window as any).BMapGL.Map("map_box");  // 创建Map实例
    // 02: 设置地图的中心点坐标
    var point = new (window as any).BMapGL.Point(116.404, 39.915);
    // 03: 初始化地图  15 表示地图的缩放级别
    map.centerAndZoom(point, 10);
    // 04: 开启鼠标滚轮缩放
    map.enableScrollWheelZoom(true);
    // 05: 设置地图的旋转角度和倾斜角度
    // map.setHeading(64.5);   //设置地图旋转角度
    // map.setTilt(73);       //设置地图的倾斜角度

    // 06: 设置地图为地球模式
    // map.setMapType(BMAP_EARTH_MAP);      // 设置地图类型为地球模式
})

</script>

<style scoped lang="scss">
#map_box {
    width: 100%;
    height: 100%;
    // overflow: hidden;
    margin: 0;
    font-family: "微软雅黑";
}
</style>

地图打点效果

<template>
    <div id="map_box">
        地图开发
    </div>
</template>

<script setup lang='ts'>
import { onMounted } from 'vue'

import { ref, reactive } from 'vue';
// addressArr 为后端返回的坐标数据
const addressArr = ref([
    {
        longitude: 116.304, latitude: 39
    },
    {
        longitude: 117.304, latitude: 39.5
    },
    {
        longitude: 116.504, latitude: 38.345
    },
    {
        longitude: 115.84, latitude: 38.12
    },
    {
        longitude: 116.804, latitude: 39.5
    }

])
onMounted(() => {
    // 01: 创建地图实例
    var map = new BMapGL.Map("map_box");
    // 02: 开启鼠标滚轮缩放
    map.enableScrollWheelZoom(true);

    // 设置循环, 创建多个点标记
    addressArr.value.forEach(item => {
        // 03: 设置地图的中心点坐标
        var point = new BMapGL.Point(item.longitude, item.latitude);
        // 04: 初始化地图  15 表示地图的缩放级别
        map.centerAndZoom(point, 10);
        // 05: 创建点标记
        var marker = new BMapGL.Marker(point);
        // 06: 在地图上应用marker
        map.addOverlay(marker);
        // 创建地理编码实例      
        var myGeo = new BMapGL.Geocoder();
        // 创建信息窗口
        var opts = {
            width: 200,
            height: 100,
            title: '当前位置:'
        };
        // 根据坐标得到地址描述    
        myGeo.getLocation(new BMapGL.Point(item.longitude, item.latitude), function (result) {
            if (result) {
                // console.log('当前位置为', result.address);
                (result.address);

                var infoWindow = new BMapGL.InfoWindow(result.address, opts);
                // 点标记添加点击事件
                marker.addEventListener('click', function () {
                    map.openInfoWindow(infoWindow, point); // 开启信息窗口
                });
            }
        });
    })
})

</script>
<style scoped lang="scss">
#map_box {
    width: 100%;
    height: 100%
}
</style>