入门百度地图 JavaScript API

注册

先申请百度账号，创建地图应用生成 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><head><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta http-equiv="content-type" content="text/html; charset=utf-8" /><title>测试</title><script type="text/javascript" src="./test/jquery.min.js"></script><style type="text/css">html {height: 100%;}body {height: 100%;margin: 0px;padding: 0px;}#container {height: 100%;}.bmap {height: 100%;width: 100%;}</style><script src="http://api.map.baidu.com/api?type=webgl&v=1.0&ak=?"></script></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>

就这么简单，一个百度地图的开发环境搭建好了。
当然也有使用vue、react。这时候就可以使用社区同学，对地图api封装后的框架。如 vue-baidu-map、rc-bmap 等。或者使用webpack的外部扩展(Externals)。

// 在配置中添加
module.exports = {//...externals: {BMapGL: 'BMapGL',},
};// 在页面中就可以使用模块化方式引入
import BMapGL from 'BMapGL';

简单介绍

官网开发指南

控件

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

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;
}

覆盖物

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

// 创建位置点
var point = new BMapGL.Point(121.52, 31.0)
// 创建带高度的点
var marker3d = new BMapGL.Marker3D(point, 8000, {
size: 50,
shape: BMAP_SHAPE_CIRCLE,
fillColor: '#454399',
fillOpacity: 0.6
})
// 将点添加到地图上
map.addOverlay(marker3d)

事件处理

百度地图API拥有一个自己的事件模型和DOM事件使用方式类式。

// 使用方式 监听点击事件
map.addEventListener('click', handleClick );function handleClick(e) {// e参数会包含鼠标所对应的地理位置latlngalert('click!')
}
// 清除监听事件
map.removeEventListener('click', handleClick);

部分事件截图

LBS服务

百度地图对开发者提供的，围绕地理位置数据而展开的服务。
根据地址转换到经纬度，根据经纬度返回经纬度的，自动规划出行路线，等。
官方示例

入门百度地图 JavaScript API相关推荐

百度地图 JavaScript API
文章目录 1.账号申请 2.创建应用 3.使用地图介绍示例 4.具体使用控件个性地图带高度的点(标记地点.覆盖物) 点击事件参考资料: 入门百度地图 JavaScript API | 8月 ...
百度地图JavaScript API覆盖物旋转时出现偏移
在项目中,调用百度地图JavaScript API,做覆盖物的旋转再添加到地图上,结果出现偏移了. 调试过程中的效果图: 发现图片的旋转并不是按车子的中心来的,而是之外的一个点.最后发现犯了一个很细节 ...
html5 百度地图api文档,开发指南--百度地图JavaScript API大众版.doc
开发指南--百度地图JavaScriptAPI大众版开发指南--百度地图JavaScriptAPI大众版简介 JavaScript API大众版 JavaScript API功能介绍百度地图Jav ...
百度地图JavaScript API GL—简易行政区划图层
map开发百度地图JavaScript API GL-简易行政区划图层 administrator 2022年6月6日简易行政区划图层更新时间:2022年3月12日简介 DistrictLay ...
百度地图JavaScript API经纬度查询-MAP
百度地图JavaScript API经纬度查询-MAP-ABCDEFGHIJKMHNOPQRSTUVWXYZ: 搜索:<input type="text" size=&quo ...
百度地图JavaScript API GL
介绍百度地图JavaScript API GL v1.0是一套由JavaScript语言编写的应用程序接口. 下面通过一个简单的示例,来学习一下快速创建一张"我的地图", 百度地 ...
百度地图JavaScript API GL 实现车辆轨迹功能
百度地图JavaScript API GL是百度地图提供的一种基于WebGL技术的地图展示方式.它可以在现代浏览器中以更高效的方式呈现3D地图场景,同时支持自定义图层和动画效果,可以应用于各种地图应用 ...
Java经纬度画轨迹图_利用百度地图JavaScript API绘制运动轨迹
写在前面欢迎访问我的博客如果需要使用百度地图javasript api,需先进行开发者认证,balalalala写上一堆理由之后认证就行,然后创建浏览器端的应用,得到可用的Ak,详情见百度地图开放 ...
百度地图JavaScript API 学习之浏览器定位
浏览器定位示例百度地图API官方的所有demo示例--请直戳这里官方浏览器定位demo示例--请直戳这里后来发现的问题,这里记录一下: 在使用百度地图JS API时,无意中发现谷歌浏览器的浏览器 ...

入门百度地图 JavaScript API

注册

载入地图

简单介绍

控件

覆盖物

事件处理

LBS服务

入门百度地图 JavaScript API相关推荐

最新文章

热门文章