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

相关推荐
深眸财经6 小时前
从商汤科技年报,看一家AI企业的确定性叙事
人工智能·科技·百度
蜂耘7 小时前
百度萝卜快跑能成为全球无人驾驶出行市场主导者吗?
百度·汽车
itwangyang52014 小时前
人工智能在生物医药领域的应用地图:AIBC2025将于6月在上海召开!
人工智能·百度
飞桨PaddlePaddle1 天前
飞桨PP系列新成员PP-DocLayout开源,版面检测加速大模型数据构建,超百页文档图像一秒搞定
人工智能·百度·paddlepaddle·飞桨·deepseek
北屿升:1 天前
Scala:大数据时代的多面手
百度·微信·微信公众平台·facebook·新浪微博
百度Geek说3 天前
秒哒首发即爆发!上线首日吸引2万用户,打造3万应用!
百度
程序员的世界你不懂4 天前
axios基础入门教程
经验分享·百度
技能咖6 天前
“人工智能+”新赛道与生成式人工智能(GAI)认证:驱动未来竞争力的双引擎
人工智能·百度
高校网站建设群系统EduCMS8 天前
百度SEO和必应SEO优化方法
百度
喆星时瑜9 天前
地理信息可视化技术大全【WebGIS 教程一】
信息可视化·gis·开发·地图·webgis