vue项目使用百度地图

打开百度地图开放平台百度地图开放平台 | 百度地图API SDK | 地图开发

在控制台新建应用 复制访问应用的ak

可修改地图样式

使用部分

html 复制代码
 <!-- 引入地图 -->
      <div class="main-aside">
        <div id="b-map-container"></div>
      </div>

添加百度地图js脚本

TypeScript 复制代码
// 添加百度地图js脚本
const BMap = ref(); // 地图对象
let bdMapScript = document.getElementById('baidu-map') as HTMLScriptElement;
if (!bdMapScript) {
  const head = document.head;
  bdMapScript = document.createElement('script');
  bdMapScript.src = `https://api.map.baidu.com/getscript?v=3.0&ak=h9cylB8tCLflk03R9DnHEg7LXYwlKOmn`;
  bdMapScript.id = 'baidu-map';
  head.appendChild(bdMapScript);
  // 监听脚本加载状态
  bdMapScript.addEventListener('load', () => {
    // 保存 BMap
    BMap.value = (window as any).BMap;
  });
}

BMap.value = (window as any).BMap;

创建地图对象

TypeScript 复制代码
// 创建地图对象
const map = ref();
// 监听地图
watch(BMap, () => {
  if (BMap.value) {
    setTimeout(() => {    // 加载完毕,开始渲染地图
      map.value = new BMap.value.Map('b-map-container');
      // 启用滚轮缩放
      map.value.enableScrollWheelZoom(true);

      // 创建 标点
      siteMonitorData.value.forEach(item => {
        const point = new BMap.value.Point(Number(item.lat), Number(item.lng));
        map.value.centerAndZoom(point, 10);

        // 自定义标点样式

        const myIcon = new BMap.value.Icon("/markStyle.png", new BMap.value.Size(140, 100));
        // 创建标点
        const marker = new BMap.value.Marker(point, { icon: myIcon });// 创建标注

        // 添加 标点
        map.value.addOverlay(marker);
        // 给marker对象

        marker.addEventListener('click', function () {
          // 可写div  此处是控制了弹窗展示
          dialogVisible.value = true
          infoMapData.value = item
        })
        /*
          // const makerDialog={
          //   template: `
          //   <el-dialog title="Marker 信息" :visible.sync="dialogVisible==true" @close="handleClose">
          //     <!-- 你的弹窗内容 -->
          //   </el-dialog>
          // `,
          // }
          // let infoWindow = new BMap.value.InfoWindow(makerDialog); // 创建信息窗口对象
          // map.value.openInfoWindow(infoWindow, point); // 打开信息窗口
        */
        // 文本标注
        var opts = {
          position: point, // 指定文本标注所在的地理位置

          offset: new BMap.value.Size(-30, -34), // 设置文本偏移量

        }

        var label = new BMap.value.Label(item.lampNo, opts)

        // 自定义文本标注样式

        label.setStyle({

          color: '#fff',

          //  borderRadius: '8px',

          borderColor: 'transparent',

          //  padding: '12px',

          fontSize: '14px',

          //  height: '22px',
          //  width:'222px',

          lineHeight: '22px',

          fontFamily: '微软雅黑',

          //  footWeight:'bold',
          background: 'transparent',
        })

        map.value.addOverlay(label)


      })
},300)  // 此处给定时器是因为防止路由切换时地图未加载空白
}
}

根据主题设置地图皮肤

TypeScript 复制代码
      // 根据主题设置地图皮肤
      map.value.setMapStyleV2({
        // dark  : 6af88a1ac934b8e5502bfc0f78eafaa4
        // light : 9fa3c9dc8898f826e5944f7da218e195
        styleId: '6af88a1ac934b8e5502bfc0f78eafaa4',
      });
      // 加载完毕
      // map.value.addEventListener('tilesloaded', () => {
      //     // 关闭加载
      //     pageLading.value = false;
      // });

纪 2024.0415 欣欣向荣

相关推荐
卷Java10 小时前
百度AI车牌识别配置指南
java·开发语言·百度·uni-app·dubbo·微信公众平台
道可云1 天前
道可云人工智能每日资讯|2025世界智能网联汽车大会将在北京举办
人工智能·百度·汽车·ar·xr·deepseek
你好~每一天5 天前
2025 中小企业 AI 转型:核心岗技能 “怎么证、怎么用”?
人工智能·百度·数据挖掘·数据分析·职业·转行
三天不学习9 天前
uniapp集成语音识别与图片识别集成方案【百度智能云】
百度·uni-app·语音识别
semantist@语校9 天前
语校网500所里程碑:日本语言学校数据库的标准化与可追溯机制
大数据·数据库·人工智能·百度·语言模型·oracle·github
KKKlucifer11 天前
IDC发布AI+政务、财政、应急三大市场空间与厂商份额报告
人工智能·百度·政务
SEO_juper11 天前
AEO 与 SEO 双引擎:整合策略赢得搜索全域可见性
搜索引擎·百度·ai·seo·数字营销·seo优化·aeo
资讯全球13 天前
2025年用户体验佳的大型企业报销系统
人工智能·百度·ux
武汉唯众智创14 天前
面向新质生产力,职业院校“人工智能”课程教学解决方案
人工智能·百度·新质生产力·人工智能+