百度地图demo

获取短链

直接在PC端百度地图中搜索目的地并选择分享，即可获得如https://j.map.baidu.com/1e/jWy的短链，点击后可直接跳转到该位置

Hello World

注册百度账号,获取密钥(ak)
引入百度地图apihttp://api.map.baidu.com/api?v=3.0&ak=您的密钥

也可以动态加载，并在加载完毕后使用callback回调

function myFunction() {  
  ...
}   
var script = document.createElement("script");  
script.src = "http://api.map.baidu.com/api?v=3.0&ak=您的密钥&callback=myFunction";
document.body.appendChild(script);  

创建并初始化百度地图

<div id="container" style="height:100vh;"></div>
...
var map = new BMap.Map("container");//创建地图实例 命名空间API使用BMap作为命名空间
var point = new BMap.Point(116.404, 39.915);//创建点坐标 百度BD09坐标
map.centerAndZoom(point, 15);// 初始化地图，设置中心点坐标和地图级别 

坐标系

使用百度地图JavaScript API服务必须使用百度坐标系。目前国内主要有以下三种坐标系：

WGS84：为一种大地坐标系，也是目前广泛使用的GPS全球卫星定位系统使用的坐标系。
GCJ02：又称火星坐标系，是由中国国家测绘局制订的地理信息系统的坐标系统。由WGS84坐标系经加密后的坐标系。
BD09：为百度坐标系，在GCJ02坐标系基础上再次加密。其中bd09ll表示百度经纬度坐标，bd09mc表示百度墨卡托米制坐标。
非中国地区地图，服务坐标统一使用WGS84坐标。

常用功能

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

map.addControl(new BMap.NavigationControl(opts));

基础控件可配置控件的位置,外观等。

抽象基类 Control 所有控件均继承此类的方法、属性。通过此类您可实现自定义控件
平移缩放控件 NavigationControl PC端默认位于地图左上方，它包含控制地图的平移和缩放的功能。移动端提供缩放控件，默认位于地图右下方
缩略地图 OverviewMapControl 默认位于地图右下方，是一个可折叠的缩略地图
比例尺 ScaleControl 默认位于地图左下方，显示地图的比例关系
地图类型 MapTypeControl 默认位于地图右上方
版权 CopyrightControl 默认位于地图左下方
定位 GeolocationControl 针对移动端开发，默认位于地图左下方
自定义控件可以自定义dom元素和功能，并加入地图界面

样式风格

通过setMapStyle可选择模板皮肤
通过个性地图编辑工具可自定义皮肤

标注/覆盖物/图层

标注可配置允许拖拽，且可以添加事件

默认标注
图片标注
连线标注
自定义标注
信息窗口(即一个指向地图上某点的提示框)
图层 (支持用户上传位置数据实时渲染成图层，叠加到地图上)
同一图层的内容可以统一控制

事件
地图API事件和dom事件类似，但本质上不同。
addEventListener 可用于监听click，dragend等事件
事件监听函数中传递事件对象e，至少包含事件类型（type）和触发该事件的对象（target）。
函数内的this指向触发（同时也是绑定）事件的API对象
removeEventListener 可用于移除事件

检索

关键字检索(城市/建筑名等)
几何区域检索(在指定区域内检索关键字)

地址解析 Geocoder
经纬度坐标和地址相互转化

出行路线规划

公交
驾车
步行

全景控件

允许查看指定地点的照片

定位

浏览器定位
IP定位
APP辅助SDK定位

鼠标绘制

用户可以在地图任意位置上画点、画线、画面并显示线的距离及面的面积。

点聚合

聚合区域内的点，防止大量的点堆积在一起。通过自适应地图的比例尺进行数据展示。
需要应用点聚合工具开源库

Web服务API

提供定位,路线规划,时区,静态图,上车点等查询功能