vue 百度地图开发【教程】2. 百度地图的常用配置和操作

最新推荐文章于 2025-06-11 11:37:02 发布

朝阳39

最新推荐文章于 2025-06-11 11:37:02 发布

阅读量1.9k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： # 地图开发

本文链接：https://blog.csdn.net/weixin_41192489/article/details/113743327

地图开发专栏收录该内容

12 篇文章

订阅专栏

本文详细介绍如何在百度地图中禁用点击事件、设置中心点和缩放、使用滚轮、添加标记、文本标注和行政区划，以及创建矩形区域和获取坐标范围。通过实例演示，掌握高级地图操作技巧。

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

限定地图显示范围（拖出该区域后会重新弹回）

获取百度地图的坐标范围，四个顶点坐标

更多操作参考官网

以下操作，都基于【教程】1 中绘制的百度地图 https://blog.csdn.net/weixin_41192489/article/details/113742927

<div id="myMap" style="height: 400px"></div>

关闭地图默认的可点击功能

    // 构造地图时，关闭地图默认的可点击功能
    var map = new BMap.Map("myMap", {enableMapClick:false});

默认点击地图上的景点等，会弹出景点详情，效果如下图：

设置地图中心点和缩放比例

    // 设置地图中心点和缩放比例
    map.centerAndZoom("上海",15);

启用滚轮放大缩小地图

map.enableScrollWheelZoom();

拖拽

禁用拖拽

map.disableDragging();

开启拖拽

map.enableDragging()

开启惯性拖拽

map.enableInertialDragging()

移动地图

map.panTo(new BMap.Point(113.262232,23.154345))

创建坐标点

new BMap.Point(113.262232,23.154345)

添加覆盖物 —— 点

var point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point, 15);
var marker = new BMap.Marker(point);  // 创建标注
map.addOverlay(marker);               // 将标注添加到地图中
marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画

添加覆盖物 —— 文字标签

    var point = new BMap.Point(116.417854,39.921988);
    map.centerAndZoom(point, 15);
    var opts = {
        position : point,    // 指定文本标注所在的地理位置
        offset   : new BMap.Size(30, -30)    //设置文本偏移量
    }
    var label = new BMap.Label("欢迎使用百度地图，这是一个简单的文本标注哦~", opts);  // 创建文本标注对象
    label.setStyle({
        color : "red",
        fontSize : "12px",
        height : "20px",
        lineHeight : "20px",
        fontFamily:"微软雅黑"
    });
    map.addOverlay(label);

添加覆盖物 —— 行政区划

data中定义map

map: null,

mounted中创建map，调用方法

mounted() {
    // 创建地图，关闭地图默认的可点击功能
    this.map = new BMap.Map("myMap");
    //启用滚轮放大缩小地图
    this.map.enableScrollWheelZoom();
    this.drawRegion("北京市海淀区")
},

methods 中定义方法

drawRegion(regionName) {
    let that = this
    let bdary = new BMap.Boundary();
    bdary.get(regionName, function (rs) {
        //清除地图覆盖物
        that.map.clearOverlays();
        //行政区域的点有多少个
        let count = rs.boundaries.length;
        if (count === 0) {
            console.log('未能获取当前输入行政区域');
            return;
        }
        let pointArray = [];
        for (let i = 0; i < count; i++) {
            //建立多边形覆盖物
            let ply = new BMap.Polygon(rs.boundaries[i],
                {
                    // 填充的颜色
                    fillColor: "#ff0000",
                    // 填充的透明度
                    fillOpacity: 0.1,
                    // 边框粗细
                    strokeWeight: 2,
                    // 边框类型--虚线
                    strokeStyle: "dashed",
                    // 边框颜色
                    strokeColor: "#ff0000",
                });
            // 添加点击事件
            ply.addEventListener('click', function () {
                // 改变自己的透明度
                this.setFillOpacity(0.6)
            });
            that.map.addOverlay(ply);  //添加覆盖物
            pointArray = pointArray.concat(ply.getPath());
        }
        that.map.setViewport(pointArray);    //调整视野
    });
},

点击后

清除覆盖物

map.clearOverlays()

创建矩形区域

参数为2个点的时候，为矩形区域的左上角和右下角点

new BMap.Bounds(new BMap.Point(116.027143, 39.772348),new BMap.Point(116.832025, 40.126349))

限定地图显示范围（拖出该区域后会重新弹回）

	var b = new BMap.Bounds(new BMap.Point(116.027143, 39.772348),new BMap.Point(116.832025, 40.126349));
	try {	
		BMapLib.AreaRestriction.setBounds(map, b);
	} catch (e) {
		alert(e);
	}

获取百度地图的坐标范围，四个顶点坐标

var bounds = map.getBounds();                        //获取地图可视区域 
var sw = bounds.getSouthWest();                      //获取西南角的经纬度(左下端点)
var ne = bounds.getNorthEast();                      //获取东北角的经纬度(右上端点)
var wn = new BMap.Point(sw.lng, ne.lat);             //获取西北角的经纬度(左上端点)
var es = new BMap.Point(ne.lng, sw.lat);             //获取东南角的经纬度(右下端点)