Java百度地图教程：创建地图应用与基本API的使用

淡淡的烟草味﹌ 2023-09-28 15:53 9阅读 0赞

## 一. 创建地图应用 ##

首先，打开百度开放平台，注册账号，根据提示认证过后进入控制台。

![4937eda626e14494a2558e5ef1589e2c.png][]

选择创建应用之后，填上应用名称，选择**浏览器端**(基础开发者选择这个)，Refer白名单填**\*号**（开发方便时使用）即可。

![54c9ec09c273448597a7997e00963ca0.png][]

点完提交过后，页面自动跳转，显示创建的应用信息：其中最重要的信息就是**访问应用的AK**相当于唯一的键。

![430a419e387a4545b0e0f708b9fda3e6.png][]

## 二. 展示地图 ##

通过编写代码，展示地图主要分为以下几步，可以参考[展示地图Demo][Demo]

以上代码需要注意的是， ak需要填写自己上面申请后的AK值。

**展示效果：**

![0f4f605e9d3c46d5ac070bd461429a46.png][]

## 三. 案例一：为地图添加控件 ##

加入控件是开发的基础操作，参照官方文档**[添加控件][Link 1]**

将上述代码加入**比例尺，缩放以及展示城市的控件**

<!DOCTYPE html>
    <html>
    <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Baidu Map </title>
        <style type="text/css">
            html{height:100%}
            body{height:100%;margin:0px;padding:0px}
            #container{height:100%}
        </style>
        <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&type=webgl&ak=Ej7yM4z9FsPyVgCZ5DotIPcc05PaLi06"></script>
    </head>
    <body>
    <div id="container"></div>
    <script>
        // 创建地图实例
        var map = new BMapGL.Map("container");
        // 创建点坐标
        var point = new BMapGL.Point(116.404, 39.915);
        // 初始化地图，设置中心点坐标和地图级别
        map.centerAndZoom(point, 15);
        //设置地图旋转角度
        map.setHeading(64.5);
        //设置地图的倾斜角度
        map.setTilt(73);
        // 添加比例尺控件
        var scaleCtrl = new BMapGL.ScaleControl();
        map.addControl(scaleCtrl);
        // 添加缩放控件
        var zoomCtrl = new BMapGL.ZoomControl();
        map.addControl(zoomCtrl);
        // 添加城市列表控件
        var cityCtrl = new BMapGL.CityListControl();
        map.addControl(cityCtrl);
        // 禁止地图旋转和倾斜可以通过配置项进行设置
        var map = new BMapGL.Map("allmap",{
            enableRotate: false,
            enableTilt: false
        });
    
    </script>
    </body>
    </html>

![79ec882b267f410bb7bff8fd9b7ad4a5.png][]

图中标注，所添加的控件已经添加成功了。

## 三. 案例二：为地图添加覆盖物 ##

可以在地图上添加覆盖物，覆盖物拥有自己的坐标，当扩大或缩小地图时会跟着移动。

试着参考：[添加覆盖物][Link 2]

现在在地图上的某个位置**添加红点覆盖物。**

效果：红点覆盖物就会出现在地图之上。

![42dff013a8764b288e48edb90424455d.png][]

也可以自定义覆盖物Logo，并对Logo进行鼠标监听,点击过后会出现弹窗。

<!DOCTYPE html>
    <html>
    <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Baidu Map </title>
        <style type="text/css">
            html{height:100%}
            body{height:100%;margin:0px;padding:0px}
            #container{height:100%}
        </style>
        <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&type=webgl&ak=Ej7yM4z9FsPyVgCZ5DotIPcc05PaLi06"></script>
    </head>
    <body>
    <div id="container"></div>
    <script>
        // 创建地图实例
        var map = new BMapGL.Map("container");
        // 创建点坐标
        var point = new BMapGL.Point(116.404, 39.915);
        // 初始化地图，设置中心点坐标和地图级别
        map.centerAndZoom(point, 15);
        // 开启鼠标滚动
        map.enableScrollWheelZoom(true);
        var myIcon = new BMapGL.Icon("1.jpeg", 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);
    
        marker.addEventListener("click", function(){
            alert("您点击了标注");
        });
    
    </script>
    </body>
    </html>

展示效果，如下：

![ec33cded262842178007df1a2845ba93.png][]

[4937eda626e14494a2558e5ef1589e2c.png]: https://img-blog.csdnimg.cn/4937eda626e14494a2558e5ef1589e2c.png
[54c9ec09c273448597a7997e00963ca0.png]: https://img-blog.csdnimg.cn/54c9ec09c273448597a7997e00963ca0.png
[430a419e387a4545b0e0f708b9fda3e6.png]: https://img-blog.csdnimg.cn/430a419e387a4545b0e0f708b9fda3e6.png
[Demo]: https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/show
[0f4f605e9d3c46d5ac070bd461429a46.png]: https://img-blog.csdnimg.cn/0f4f605e9d3c46d5ac070bd461429a46.png
[Link 1]: https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/widget
[79ec882b267f410bb7bff8fd9b7ad4a5.png]: https://img-blog.csdnimg.cn/79ec882b267f410bb7bff8fd9b7ad4a5.png
[Link 2]: https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/addOverlay
[42dff013a8764b288e48edb90424455d.png]: https://img-blog.csdnimg.cn/42dff013a8764b288e48edb90424455d.png
[ec33cded262842178007df1a2845ba93.png]: https://img-blog.csdnimg.cn/ec33cded262842178007df1a2845ba93.png