百度地图开发者使用教程

ButOf

墨衍会员 · AI 创作全网分发码龄5年

关注

原创最新推荐文章于 2026-09-30 13:30:04 发布 4k 阅读 AI 写同款· GEO 优化 ›

Android Studio 开发百度地图开发教程本文讲解在Android Studio中使用百度地图进行开发项目。阅读详情

1、申请百度账号和ak

2、准备页面

3、添加meta标签方便在移动平台上展示

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

4、引用百度地图API文件

<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=您的密钥">

5、创建地图容器元素设置容器样式大小

<style type="text/css">  
    html{height:100%}    
    body{height:100%;margin:0px;padding:0px}    
    #container{height:100%}    
</style>

6、创建地图实例

var map = new BMapGL.Map("container");

7、设置中心点坐标

这里我们使用BMapGL命名空间下的Point类来创建一个坐标点。Point类描述了一个地理坐标点，其中116.404表示经度，39.915表示纬度。（为天安门坐标）

var point = new BMapGL.Point(116.404, 39.915);
注意：在使用百度地图JavaScript API服务时，需使用百度BD09坐标，如使用其他坐标（ WGS84、GCJ02）进行展示，需先将其他坐标转换为BD09，详细说明请参考坐标转换说明，请勿使用非官方的转换方法。

8、地图初始化，同时设置地图展示级别

在创建地图实例后，我们需要对其进行初始化，BMapGL.Map.centerAndZoom()方法要求设置中心点坐标和地图级别。地图必须经过初始化才可以执行其他操作

map.centerAndZoom(point, 15);

9、开启鼠标滚轮缩放

map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放

10、设置地图的旋转角度和倾斜角度

地图可以自定义旋转角度和倾斜角角度

map.setHeading(64.5);   //设置地图旋转角度
map.setTilt(73);       //设置地图的倾斜角度

// 禁止地图旋转和倾斜可以通过配置项进行设置
var map = new BMapGL.Map("allmap",{
    enableRotate: false,
    enableTilt: false
});

11、变更地图类型为地球

map.setMapType(BMAP_EARTH_MAP);      // 设置地图类型为地球模式

12、声明控件并添加到地图中

var scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件
map.addControl(scaleCtrl);
var zoomCtrl = new BMapGL.ZoomControl();  // 添加缩放控件
map.addControl(zoomCtrl);
var cityCtrl = new BMapGL.CityListControl();  // 添加城市列表控件
map.addControl(cityCtrl);

13、向地图中添加标注

var point = new BMapGL.Point(116.404, 39.915);   
var marker = new BMapGL.Marker(point);        // 创建标注   
map.addOverlay(marker);                     // 将标注添加到地图中

var myIcon = new BMapGL.Icon("markers.png", new BMapGL.Size(23, 25), {   
    // 指定定位位置。  
    // 当标注显示在地图上时，其所指向的地理位置距离图标左上   
    // 角各偏移10像素和25像素。您可以看到在本例中该位置即是  
    // 图标中央下端的尖角位置。   
    anchor: new BMapGL.Size(10, 25),   
    // 设置图片偏移。  
    // 当您需要从一幅较大的图片中截取某部分作为标注图标时，您  
    // 需要指定大图的偏移位置，此做法与css sprites技术类似。   
    imageOffset: new BMapGL.Size(0, 0 - 25)   // 设置图片偏移   
});     
    // 创建标注对象并添加到地图  
var marker = new BMapGL.Marker(point, {icon: myIcon});   
map.addOverlay(marker);

14、监听标注事件

marker.addEventListener("click", function(){   
    alert("您点击了标注");   
});

15、添加折线

var polyline = new BMapGL.Polyline([
		new BMapGL.Point(116.399, 39.910),
		new BMapGL.Point(116.405, 39.920),
		new BMapGL.Point(116.425, 39.900)
	], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});
map.addOverlay(polyline);

16、添加多边形

var polygon = new BMapGL.Polygon([
        new BMapGL.Point(116.387112,39.920977),
        new BMapGL.Point(116.385243,39.913063),
        new BMapGL.Point(116.394226,39.917988),
        new BMapGL.Point(116.401772,39.921364),
        new BMapGL.Point(116.41248,39.927893)
    ], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});
map.addOverlay(polygon);

17、向地图中添加文本标注

var point = new BMapGL.Point(116.404, 39.915);
var content = "label";
var label = new BMapGL.Label(content, {       // 创建文本标注
    position: point,                          // 设置标注的地理位置
    offset: new BMapGL.Size(10, 20)           // 设置标注的偏移量
})  
map.addOverlay(label);                        // 将标注添加到地图中

18、修改文本标注样式

var point = new BMapGL.Point(116.404, 39.915);
var content = 'label';
var label = new BMapGL.Label(content, {       // 创建文本标注
    position: point,
    offset: new BMapGL.Size(10, 20)
})  
map.addOverlay(label);                        // 将标注添加到地图中
label.setStyle({                              // 设置label的样式
    color: '#000',
    fontSize: '30px',
    border: '2px solid #1E90FF'
})

19、向地图中添加信息窗口

var opts = {
    width: 250,     // 信息窗口宽度
    height: 100,    // 信息窗口高度
    title: "Hello"  // 信息窗口标题
}
var infoWindow = new BMapGL.InfoWindow("World", opts);  // 创建信息窗口对象
map.openInfoWindow(infoWindow, map.getCenter());        // 打开信息窗口

20、定位

浏览器定位

var map = new BMapGL.Map("allmap");
        var point = new BMapGL.Point(116.331398,39.897445);
        map.centerAndZoom(point,12);
        
        var geolocation = new BMapGL.Geolocation();
        geolocation.getCurrentPosition(function(r){
            if(this.getStatus() == BMAP_STATUS_SUCCESS){
                var mk = new BMapGL.Marker(r.point);
                map.addOverlay(mk);
                map.panTo(r.point);
                alert('您的位置：' + r.point.lng + ',' + r.point.lat);
            }
            else {
                alert('failed' + this.getStatus());
            }        
        });

IP定位

var map = new BMapGL.Map("allmap");
    var point = new BMapGL.Point(116.331398,39.897445);
    map.centerAndZoom(point,12);
    
    function myFun(result){
        var cityName = result.name;
        map.setCenter(cityName);
        alert("当前定位城市:" + cityName);
    }
    var myCity = new BMapGL.LocalCity();
    myCity.get(myFun);

定位SDK辅助定位

var map = new BMapGL.Map("allmap");
    var point = new BMapGL.Point(116.331398,39.897445);
    map.centerAndZoom(point,12);
            
    var geolocation = new BMapGL.Geolocation();
    // 开启SDK辅助定位
    geolocation.enableSDKLocation();
    geolocation.getCurrentPosition(function(r){
        if(this.getStatus() == BMAP_STATUS_SUCCESS){
            var mk = new BMap.Marker(r.point);
            map.addOverlay(mk);
            map.panTo(r.point);
            alert('您的位置：' + r.point.lng + ',' + r.point.lat);
        }
        else {
            alert('failed' + this.getStatus());
        }        
    });