百度地图 JavaScript API

DLNovice

已于 2022-03-08 02:34:52 修改

阅读量3.8k

点赞数 5

分类专栏： Web 文章标签： javascript 百度前端 echarts

于 2022-03-08 02:29:44 首次发布

本文链接：https://blog.csdn.net/qq_55535816/article/details/123343820

版权

Web 专栏收录该内容

9 篇文章 11 订阅

订阅专栏

文章目录

参考资料：入门百度地图 JavaScript API | 8月更文挑战 - 掘金 (juejin.cn)

今天在使用Echarts添加地图模块（精确到每个楼栋）遇阻塞，现将一些部分走通的小技巧分享给大家

先看一下简单的使用效果：
在这里插入图片描述

1、账号申请

先申请成为百度开发者（需要填写身份证信息、申请理由等），创建地图应用生成 AK。

百度地图开放平台 | 百度地图API SDK | 地图开发 (baidu.com)

一般会秒同意，所以不用担心时间问题

2、创建应用

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vOIntRKS-1646677206531)(C:\Users\pc\AppData\Roaming\Typora\typora-user-images\image-20220306212041846.png)]$

注意

应用类型选择浏览器端。
白名单输入*号，所有地址都可以访问。

在这里插入图片描述

3、使用地图

复制你的AK放入案例的示例代码即可看到效果

介绍

在页面使用script标签引入

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

v : 地图api版本。
type : 添加type=webgl，使用3D地图类型。
ak : 刚才创建应用的ak值。
百度地图示例中心

示例

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>地图</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <script type="text/javascript" src="./test/jquery.min.js"></script>
    <script src="http://api.map.baidu.com/api?type=webgl&v=1.0&ak=您的密钥"></script>

    <style type="text/css">
        html {
            height: 100%;
        }

        body {
            height: 100%;
            margin: 0px;
            padding: 0px;
        }

        #container {
            height: 100%;
        }

        .bmap {
            height: 100%;
            width: 100%;
        }
    </style>

</head>
<body>

<!-- 百度地图-->
<div id="bmap" class="bmap"></div>
<script type="text/javascript">
    var map = new BMapGL.Map('bmap') // 创建Map实例
    map.centerAndZoom('上海市', 10) // 初始化地图,设置中心点坐标和地图级别
    map.enableScrollWheelZoom(true) // 开启鼠标滚轮缩放
</script>

</body>
</html>

效果展示：

4、具体使用

官网开发指南：jspopularGL | 百度地图API SDK (baidu.com)

创建地图
展示地图
变更地图类型
添加控件
个性化地图

覆盖物
绘制点、线、面
带高度的点
镂空面绘制
3D棱柱绘制
地面叠加层
文本标注
信息窗口
交通流量图层

事件处理
地图事件
右键菜单

动态效果
自定义视角动画
轨迹动画

LBS服务
正/逆地址解析
出行路线规划
定位

图层服务
三方标准图层

类参考

下面挑几个常用的展示：

控件

控件是负责与地图交互的UI元素，百度地图API支持比例尺、缩放、定位、城市选择列表、版权，以及自定义控件。

就是在地图上层添加，对地图控制的组件。如放大、缩小、平移等。官方提供了很多定义好的控件，可以直接使用。当然我们也可以自定义控件（通过DOM事件触发函数，在函数中调用地图api）。

官网文档：jspopularGL | 百度地图API SDK (baidu.com)

控件	类名	简介
抽象基类	Control	所有控件均继承此类的方法、属性。通过此类您可实现自定义控件
比例尺	ScaleControl	默认位于地图左下方，显示地图的比例关系
缩放	ZoomControl	默认位于地图右下方，控制地图级别的缩放
定位	LocationControl	默认位于地图左下方，用于获取定位
城市选择列表	CityListControl	默认位于地图左上方，用于进行城市选择定位
版权	CopyrightControl	默认位于地图左下方，用于展示版权信息

参考示例：

代码展示

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

效果展示

在这里插入图片描述

到了这里就要提一句。百度地图左下角的图标，其实就是个img。要隐藏他只要找到样式名设置隐藏就行。这里不直接对.anchorBL隐藏是因为其他控件也使用了这个样式名。

// 图标
.anchorBL img {
    display: none;
}
// 备案信息
.BMap_cpyCtrl.anchorBL span {
    display: none !important;
}

控制控件位置等操作操作查看官方文档

个性地图

创建个性化地图样式

进入地图开放平台控制台页面，在我的地图中，创建一个地图样式：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RAQ5wVpl-1646677206534)(C:\Users\pc\AppData\Roaming\Typora\typora-user-images\image-20220306215615176.png)]$

编辑样式

点击创建的地图样式，进入样式编辑器，根据您的需求自由编辑地图样式：

请添加图片描述

发布样式并获取样式ID

完成编辑后，在我的地图或者编辑器中发布该地图样式，获取发布后生成的样式ID：

在这里插入图片描述

在JavaScript API中应用地图样式

将第三步中获取的样式ID作为setMapStyleV2方法的参数。(注意：发布的styleID需要与ak为同一个用户)

带高度的点（标记地点、覆盖物）

Marker3d | 百度地图API SDK (baidu.com)

简单理解就是在地图图层上层添加元素展示。在百度地图中覆盖物种类有很多，通过不同的覆盖物函数，在地图上添加不同的覆盖物如点、面、信息框等。后面会详细介绍下覆盖物。
使用map.addOverlay()方法向地图添加覆盖物，使用map.removeOverlay()方法移除覆盖物。

拾取坐标系统 (baidu.com)

示例代码：

// 创建位置点
    var point = new BMapGL.Point(121.52, 31.0)
    // 创建带高度的点
    var marker3d = new BMapGL.Marker3D(point, 8000, {
        size: 50,
        shape: BMAP_SHAPE_CIRCLE,
        fillColor: '#367cc2',
        fillOpacity: 0.6
    });
    // 将点添加到地图上:通过map.addoverlay()方法将创建的点覆盖物添加到地图上。
    map.addOverlay(marker3d);

效果展示：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ejOj3up7-1646677206536)(C:\Users\pc\AppData\Roaming\Typora\typora-user-images\image-20220306232629694.png)]$

点击事件

以刚才的带高度的点为例，如果我想通过点击标记点，弹出信息

JavaScript API | 百度地图API SDK (baidu.com)

地图JS API示例 | 百度地图开放平台 (baidu.com)

百度地图JSAPI 2.0类参考 (baidu.com)

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tlxi9Yd1-1646677206536)(C:\Users\pc\AppData\Roaming\Typora\typora-user-images\image-20220307020657029.png)]$

示例代码

// 创建信息窗口
    var opts = {
        width: 200,
        height: 100,
        title: '施工地点'
    };
    var infoWindow = new BMapGL.InfoWindow('地址：上海市 达令巷公园', opts);
    // 点标记添加点击事件
    marker3d.addEventListener('click', function () {
        map.openInfoWindow(infoWindow, point); // 开启信息窗口
    });

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ozSlmzFD-1646677206537)(C:\Users\pc\AppData\Roaming\Typora\typora-user-images\image-20220307014441980.png)]$

效果展示：

在这里插入图片描述

DLNovice

关注

5
点赞
踩
12

收藏

觉得还不错? 一键收藏
打赏
4
评论
百度地图 JavaScript API

文章目录1、账号申请2、创建应用3、使用地图介绍示例4、具体使用控件个性地图带高度的点（标记地点、覆盖物）点击事件参考资料：入门百度地图 JavaScript API | 8月更文挑战 - 掘金 (juejin.cn)1、账号申请先申请成为百度开发者（需要填写身份证信息、申请理由等），创建地图应用生成 AK。百度地图开放平台 | 百度地图API SDK | 地图开发 (baidu.com)一般会秒同意，所以不用担心时间问题2、创建应用注意应用类型选择浏览器端。白名单输入*号，所有地
复制链接

扫一扫