vue 使用百度地图（marker，infowindow)

最新推荐文章于 2024-04-23 15:59:15 发布

Jade24

最新推荐文章于 2024-04-23 15:59:15 发布

阅读量2.4k

点赞数 4

分类专栏：前端 vue 百度地图文章标签： vue.js 百度 javascript

本文链接：https://blog.youkuaiyun.com/Jade24/article/details/122427614

版权

前端同时被 3 个专栏收录

1 篇文章

订阅专栏

vue

1 篇文章

订阅专栏

百度地图

1 篇文章

订阅专栏

本文介绍如何在Vue项目中集成百度地图API并实现自定义样式、添加比例尺控件及Marker标注等功能。通过具体代码示例展示了地图初始化、设置坐标点与展示级别、使用自定义图标及添加点击事件等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue使用的是vue2，脚手架是vue-cli3

首先在public文件夹的index.html中引入百度地图api（需要去官网(jspopularGL | 百度地图API SDK)申请密钥）

这次使用的是1.0版本的webgl 因为要使用自定义样式

然后直接在vue文件中使用

<template>
  <div>
    <div id="container"></div> 
  </div>
</template>
<script>
export default {
    name: "baidu-map",
    data() {
       return {
          map:null
        };
    },
    mounted(){
        this.map = new BMapGL.Map('container') //创建一个地图实例
        this.map.centerAndZoom(new BMapGL.Point(166.6666,36.6666), 12); //设置坐标点和展示级别
        this.map.setMapStyleV2({
          styleId:'b3a455df90100869d7f9ed26e438fffe' //样式ID
        });
         
        this.map.enableScrollWheelZoom(true) // 允许地图可被鼠标滚轮缩放

        var scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件
        this.map.addControl(scaleCtrl);  

        //创建图标
        let myIcon = new BMapGL.Icon('图片地址', new BMapGL.Size(51, 60));
        // 创建Marker标注，使用图标
        let point = new BMapGL.Point('lng的值','lat的值');
        let marker = new BMapGL.Marker(point, {
            icon: myIcon
        });
        // 将标注添加到地图
        this.map.addOverlay(marker);

        // 信息窗口内容----点击图标打开信息窗口
        let opts = {
            width : 255,     // 信息窗口宽度
            height: 190,     // 信息窗口高度
        }
        let content=` <div class="alarmDiv">
                        <div class="imgbj">
                          <div class="imgtitle">内容</div>
                        </div>
                        <p>标题</p>
                      </div>`;
        let infoWindow = new BMapGL.InfoWindow(content, opts);  // 创建信息窗口对象 
        marker.addEventListener("click", () => {          
          this.map.openInfoWindow(infoWindow, point); //开启信息窗口
        });
    }

}
</script>

修改信息窗的样式

/*修改地图信息窗口对象样式*/  
.BMap_bubble_pop{
    background:#001D4F !important; 
    color:#FFFFFF !important;
    border:0 !important;
    margin-top:30px;
    margin-left: -33px;
}
/*替换剪头*/  
img[src="http://webmap0.bdimg.com/image/api/iw_tail.png"]{
    opacity:.7;
    width: 20px !important;
    height: 15px !important;
    top:188px !important;
    left: 126px !important;
    filter:alpha(opacity=70);
    content: url('~@/assets/icon/jt.png');
}