百度地图API的使用教程以及案例
一、注册
百度地图：掌握当前的位置在网页显示位置，插入地图 拖拽，点击事件。
注意：定位 距离 公交 不关心
官网： 点我进入百度地图官网
应用场景：网页插入百度地图
二、获取账号和密钥
三、插入地图
创建地图容器元素 设置大小
#container { width: 1300px; height: 600px; border: 1px solid #999; }
<div id="container"></div>
引用百度地图API文件
<script src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥"></script>
创建地图实例
四、添加控件
效果
代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #container { width: 1300px; height: 600px; border: 1px solid #999; } </style> <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=oek2hHpa3PhlyQe2WYDz5xtiIexpaeqi"></script> </head> <body> <div id="container"></div> <script> //1.创建地图实例 var map = new BMap.Map("container"); //2.设置中心点坐标 BMap命名空间下的Point类来创建一个坐标点 var point = new BMap.Point(116.404, 39.915); //3.地图初始化，同时设置地图展示级别 (3-19) map.centerAndZoom(point, 15); //4.鼠标滚轮 开启鼠标滚轮缩放 map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放 //5.添加控件 //平移缩放控件 NavigationControl PC端默认位于地图左上方，它包含控制地图的平移和缩放的功能 map.addControl(new BMap.NavigationControl()); //比例尺 ScaleControl 默认位于地图左下方，显示地图的比例关系 map.addControl(new BMap.ScaleControl()); //缩略地图 OverviewMapControl 默认位于地图右下方，是一个可折叠的缩略地图 map.addControl(new BMap.OverviewMapControl()); //地图类型 MapTypeControl 默认位于地图右上方 map.addControl(new BMap.MapTypeControl()); var opts = { anchor: BMAP_ANCHOR_TOP_RIGHT, //位置 type: BMAP_NAVIGATION_CONTROL_SMALL //类型 } map.addControl(new BMap.NavigationControl(opts)); </script> </body> </html>
百度地图API的使用教程以及案例（二）https://developer.aliyun.com/article/1384441
