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

一. 创建地图应用

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

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

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

二. 展示地图

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


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 map = new BMapGL.Map("allmap",{
        enableRotate: false,
        enableTilt: false
    });
script>
body>
html>

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

展示效果：

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

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

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


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>

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

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

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

试着参考：添加覆盖物

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


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 marker = new BMapGL.Marker(point);
    // 将标注添加到地图中
    map.addOverlay(marker);
script>
body>
html>

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

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


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>

展示效果，如下：

相关阅读:
HAL库 CubeMX STM32采用SDIO实现对SD卡和NAND Flash的读写
 一幅长文细学TypeScript（一）——上手
 工具安装手册
 汽车一键启动智能系统功能作用
 商城多语言改造方案
 softmax汇总
 当ReadFile和WriteFile的lpOverlapped参数为NULL时，那么必须指定一定有效的地址用来存放读写的字节数
 Java项目：ssm赛事打分系统
 【Spring笔记05】Spring的自动装配
 妙啊，Python 管道 Pipe 编写代码如此优雅
原文地址：https://blog.csdn.net/qq_41857955/article/details/125882531