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

相关推荐
北屿升:21 小时前
星火燎原:Spark技术如何重塑大数据处理格局
百度·微信·微信公众平台·facebook·新浪微博
北屿升:3 天前
Spark SQL核心解析:大数据时代的结构化处理利器
百度·微信·新浪微博
chuangfumao6 天前
解读《人工智能指数报告 2025》:洞察 AI 发展新态势
人工智能·搜索引擎·百度
百度Geek说8 天前
名列前茅!百度文心大模型4.5及X1在中国信通院“方升”大模型基准测试中表现优异
百度
风雅颂FYS9 天前
C# 经纬度坐标的精度及WGS84(谷歌)、GCJ02(高德)、BD09(百度)坐标相互转换(含高精度转换)
百度·c#
百度Geek说10 天前
飞桨新一代框架3.0正式发布:加速大模型时代的技术创新与产业应用
百度·百度飞桨
北屿升:10 天前
spark core
百度·微信·微信公众平台·facebook·新浪微博
urhero15 天前
在Python软件中集成智能体:以百度文心一言和阿里通义千问为例
python·百度·文心一言
反转16 天前
百度的deepseek与硅基模型的差距。
百度
百度Geek说17 天前
一篇论文,看见百度广告推荐系统在大模型时代的革新
百度