百度地图常用功能：获取中心点、缩放级别、坐标转换等实用技巧

4 阅读 0 评论 0 点赞

前言

百度地图JavaScript API是百度为开发者提供的一套基于百度地图的应用程序接口，包括JavaScript API、Web服务API、Android SDK、iOS SDK等。其中JavaScript API应用最为丰富，能够帮助开发者在网站中构建功能丰富、交互性强的地图应用。

本文汇总了百度地图开发中常用的10个实用功能，包括获取地图可视区域、3D展示、设置缩放级别、坐标转换、测距、关键字提示、自定义控件等，方便开发者快速查阅和使用。

功能一：获取地图窗口的可视区域

使用 getBounds() 方法可以获取当前地图可视范围的经纬度和经纬度范围。通过返回的Bounds对象，可以获取可视区域的西南角和东北角坐标。

var map = new BMap.Map("allmap");            // 创建Map实例
map.centerAndZoom(new BMap.Point(116.4035,39.915), 14);  //初始化时，即可设置中心点和地图缩放级别。
var bs = map.getBounds();   //获取可视区域
var bssw = bs.getSouthWest();   //可视区域左下角
var bsne = bs.getNorthEast();   //可视区域右上角
alert("当前地图可视范围是：" + bssw.lng + "," + bssw.lat + "到" + bsne.lng + "," + bsne.lat);

功能二：3D展示地图

通过设置 mapType 参数为 BMAP_PERSPECTIVE_MAP，可以实现3D视角的地图展示效果，让地图查看更加立体直观。

var map = new BMap.Map("allmap", {mapType:BMAP_PERSPECTIVE_MAP}); 
 
map.setCurrentCity("北京"); // 设置地图显示的城市 此项是必须设置的 
 
map.enableScrollWheelZoom(true);

功能三：设置地图允许的缩放级别范围

通过配置 minZoom 和 maxZoom 参数，可以限制地图的缩放级别范围，防止用户缩放过度或不足。

var map = new BMap.Map("allmap",{minZoom:4,maxZoom:8}); // 创建Map实例 
map.enableScrollWheelZoom(true);

功能四：获取当前地图视野的中心点

使用 getCenter() 方法可以获取当前地图可视区域的中心点坐标，返回一个Point对象，包含lng（经度）和lat（纬度）属性。

var map = new BMap.Map("allmap"); // 创建Map实例 
map.centerAndZoom(new BMap.Point(116.4035,39.915),8); //初始化时，即可设置中心点和地图缩放级别。 
alert("当前地图中心点：" + map.getCenter().lng + "," + map.getCenter().lat);

功能五：Google地图坐标转换为百度地图坐标

由于国内地图存在坐标偏移问题，当需要使用Google地图坐标时，需要转换为百度坐标系。通过 BMap.Convertor.translate() 方法可以进行坐标转换，参数2表示GCJ-02坐标系（国测局坐标）。

//谷歌坐标 
var x = 116.32715863448607; 
var y = 39.990912172420714; 
var ggPoint = new BMap.Point(x,y); 
//地图初始化 
var bm = new BMap.Map("allmap"); 
bm.centerAndZoom(ggPoint, 15); 
bm.addControl(new BMap.NavigationControl());
//添加谷歌marker和label 
var markergg = new BMap.Marker(ggPoint); 
bm.addOverlay(markergg); 
var labelgg = new BMap.Label("我是谷歌标注哦",{offset:new BMap.Size(20,-10)}); 
markergg.setLabel(labelgg); 
//坐标转换完之后的回调函数 
translateCallback = function (point){ 
    var marker = new BMap.Marker(point); 
    bm.addOverlay(marker); 
    var label = new BMap.Label("我是百度标注哦",{offset:new BMap.Size(20,-10)}); 
    marker.setLabel(label); 
    bm.setCenter(point); 
    alert(point.lng + "," + point.lat);
} 
setTimeout(function(){ 
    BMap.Convertor.translate(ggPoint,2,translateCallback); //GCJ-02坐标转成百度坐标 
}, 2000);

功能六：GPS坐标转换为百度地图坐标

GPS设备获取的真实经纬度坐标也需要转换为百度坐标系才能正确显示在百度地图上。使用 BMap.Convertor.translate() 方法，参数0表示WGS84坐标系（真实经纬度）。

//GPS坐标 
var xx = 116.397428; 
var yy = 39.90923; 
var gpsPoint = new BMap.Point(xx,yy); 
//地图初始化 
var bm = new BMap.Map("allmap"); 
bm.centerAndZoom(gpsPoint, 15); 
bm.addControl(new BMap.NavigationControl());
//添加GPS标注 
var markergps = new BMap.Marker(gpsPoint); 
bm.addOverlay(markergps); 
var labelgps = new BMap.Label("我是GPS标注哦",{offset:new BMap.Size(20,-10)}); 
markergps.setLabel(labelgps); 
//坐标转换完之后的回调函数 
translateCallback = function (point){ 
    var marker = new BMap.Marker(point); 
    bm.addOverlay(marker); 
    var label = new BMap.Label("我是百度标注哦",{offset:new BMap.Size(20,-10)}); 
    marker.setLabel(label); 
    bm.setCenter(point);
} 
setTimeout(function(){ 
    BMap.Convertor.translate(gpsPoint,0,translateCallback); //真实经纬度转成百度坐标 
}, 2000);

功能七：计算两点之间的直线距离

使用 getDistance() 方法可以计算两个坐标点之间的直线距离（单位：米）。结合Polyline折线还可以在地图上直观展示两点间的连线。

var map = new BMap.Map("allmap");
map.centerAndZoom("重庆",12);                   // 初始化地图,设置城市和地图级别。
var pointA = new BMap.Point(106.486654,29.490295);  // 创建点坐标A--大渡口区
var pointB = new BMap.Point(106.581515,29.615467);  // 创建点坐标B--江北区
alert('从大渡口区到江北区的距离是：'+map.getDistance(pointA,pointB)+' 米。');     //获取两点距离
var polyline = new BMap.Polyline([pointA, pointB], {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5});  //定义折线
map.addOverlay(polyline);   //添加折线到地图上

功能八：关键字输入提示词条（自动完成）

通过 BMap.Autocomplete 类可以实现搜索框的自动补全功能，根据用户输入的地名、地址等关键字，实时显示相关的建议条目，提升用户体验。

function G(id) {
    return document.getElementById(id);
}
 
var map = new BMap.Map("l-map");
map.centerAndZoom("北京",12);                   // 初始化地图,设置城市和地图级别。
//建立一个自动完成的对象
var ac = new BMap.Autocomplete({ "input" : "suggestId" ,"location" : map});
ac.addEventListener("onhighlight", function(e) {  //鼠标放在下拉列表上的事件
    var str = "";
    var _value = e.fromitem.value;
    var value = "";
    if (e.fromitem.index > -1) {
        value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
    }    
    str = "FromItem
index = " + e.fromitem.index + "
value = " + value;
    value = "";
    if (e.toitem.index > -1) {
        _value = e.toitem.value;
        value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
    }    
    str += "
ToItem
index = " + e.toitem.index + "
value = " + value;
    G("searchResultPanel")[removed] = str;
});
 
var myValue;
ac.addEventListener("onconfirm", function(e) {    //鼠标点击下拉列表后的事件
    var _value = e.item.value;
    myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
    G("searchResultPanel")[removed] ="onconfirm
index = " + e.item.index + "
myValue = " + myValue;
    setPlace();
});
 
function setPlace(){
    map.clearOverlays();    //清除地图上所有覆盖物
    function myFun(){
        var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
        map.centerAndZoom(pp, 18);
        map.addOverlay(new BMap.Marker(pp));    //添加标注
    }
    var local = new BMap.LocalSearch(map, { //智能搜索
        onSearchComplete: myFun
    });
    local.search(myValue);
}

功能九：自定义版权控件

百度地图默认显示版权信息，开发者也可以通过 BMap.CopyrightControl 添加自定义的版权控件，设置内容和显示位置。

var map = new BMap.Map("allmap");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
var cr = new BMap.CopyrightControl({anchor: BMAP_ANCHOR_TOP_RIGHT});
map.addControl(cr); //添加版权控件
var bs = map.getBounds();
cr.addCopyright({id: 1, content: "我是自定义版权控件呀", bounds: bs});

功能十：自定义控件

百度地图支持开发者创建完全自定义的控件。需要继承 BMap.Control 基类，实现 initialize 方法，并将控件添加到地图中。以下是一个自定义放大按钮的示例：

var map = new BMap.Map("allmap"); 
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); 

// 定义一个控件类,即function 
function ZoomControl(){ 
    // 默认停靠位置和偏移量 
    this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT; 
    this.defaultOffset = new BMap.Size(10, 10); 
}

// 自定义控件必须实现自己的initialize方法,并且将控件的DOM元素返回 
// 在本方法中创建个div元素作为控件的容器,并将其添加到地图容器中 
ZoomControl.prototype = new BMap.Control();
ZoomControl.prototype.initialize = function(map){ 
    // 创建一个DOM元素 
    var div = document.createElement("div"); 
    div.appendChild(document.createTextNode("放大两级")); 
    div.style.cursor = "pointer";
    div.style.border = "1px solid gray";
    div.style.backgroundColor = "white";
    div.style.padding = "5px";
    div.onclick = function(e){ 
        map.setZoom(map.getZoom() + 2); 
    } 
    // 添加DOM元素到地图中 
    map.getContainer().appendChild(div); 
    // 将DOM元素返回 
    return div; 
} 

// 创建控件并添加到地图当中 
var myZoomCtrl = new ZoomControl(); 
map.addControl(myZoomCtrl);

总结

百度地图JavaScript API功能强大、文档完善，以上10个功能涵盖了地图开发中最常用的场景。建议开发者在实际使用时：

妥善保管API密钥，不要在公开代码中泄露
异步加载地图API，避免阻塞页面渲染
根据需要选择合适的坐标转换方式
关注API版本更新，及时升级到新特性

点赞(0) 打赏

本文分类：前端框架
本文标签：百度地图 JavaScript 前端开发 API 地图坐标转换控件
浏览次数：4 次浏览
发布日期：2026-09-17 13:31:54
本文链接：https://www.ybb.press/frontend-frameworks/7074.html

百度地图常用功能：获取中心点、缩放级别、坐标转换等实用技巧

前言

功能一：获取地图窗口的可视区域

功能二：3D展示地图

功能三：设置地图允许的缩放级别范围

功能四：获取当前地图视野的中心点

功能五：Google地图坐标转换为百度地图坐标

功能六：GPS坐标转换为百度地图坐标

功能七：计算两点之间的直线距离

功能八：关键字输入提示词条（自动完成）

功能九：自定义版权控件

功能十：自定义控件

更多资源

总结

评论列表共有 0 条评论

发表评论取消回复

百度地图常用功能：获取中心点、缩放级别、坐标转换等实用技巧

前言

功能一：获取地图窗口的可视区域

功能二：3D展示地图

功能三：设置地图允许的缩放级别范围

功能四：获取当前地图视野的中心点

功能五：Google地图坐标转换为百度地图坐标

功能六：GPS坐标转换为百度地图坐标

功能七：计算两点之间的直线距离

功能八：关键字输入提示词条（自动完成）

功能九：自定义版权控件

功能十：自定义控件

更多资源

总结

H5页面跳转到小程序的实现方法详解

HTML <a> 标签的 target 属性详解

HTML <a> 标签的 target 属性详解

HTML <a> 标签的 target 属性详解

评论列表 共有 0 条评论

发表评论 取消回复

评论列表共有 0 条评论

发表评论取消回复