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 欣欣向荣

相关推荐
北京鹏生科技有限公司13 小时前
EcoVadis审核是什么?EcoVadis审核流程包括什么?
大数据·百度
HengCeResearch8814 小时前
中国【食品检测实验室自动化】程度相对欧美等发达国家相对落后,并且技术层面存在明显的代差,未来有比较大的发展空间
人工智能·百度·自动化
AIGC方案1 天前
免费下载 | 2024年中国人工智能教育蓝皮书
人工智能·百度
m0_523674211 天前
哈佛商业评论 | 未来商业的技术趋势:百度李彦宏谈技术如何变革商业
人工智能·百度
陪学2 天前
AI时代,百度的三大主义
大数据·人工智能·百度·产品运营·互联网·生活·产品经理
杰哥技术分享2 天前
百度飞浆:paddle 线性回归模型
百度·线性回归·paddle
岛屿旅人2 天前
美国人工智能国家安全备忘录核心解读(上)
网络·人工智能·安全·web安全·百度·网络安全
菩提祖师_3 天前
人工智能在金融领域的应用与风险防范研究
人工智能·百度·金融
汇匠源4 天前
百度世界大会2024,展现科技改变生活的力量
人工智能·百度
文心智能体平台Agentbuilder5 天前
百度世界2024|李彦宏:智能体是AI应用的最主流形态,即将迎来爆发点
人工智能·百度·ai·文心智能体·百度世界2024·秒哒