百度地图和高德地图的API视频教程

学习地址:

http://www.houdunren.com/houdunren18_lesson_152?vid=10228

素材地址:

https://gitee.com/houdunwang/video

第二课:学习笔记:

一.js引入百度地图

http://lbsyun.baidu.com/index.php?title=jspopular/guide/show

登陆上面的网址

创建一个浏览器端应用

获取自己的密钥

二.写html代码

三.设置显示中心点方法一:

 效果:
设置显示中心点方法二:

<!DOCTYPE html>
<html>
 <head>
   <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
   <meta charset="utf-8">
   <title>百度api</title>
   <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=nGt7wwtbLb4NrZDlgSobB9d7RdIeWvUD"></script>

   <style type="text/css">
      html,body,#app{
        height:80%;
        width:80%;
        overflow:hidden;
      }

  </style>
 </head>
 <body>
   <div id="app">

   </div>
 </body>
 <script type="text/javascript">
 var map = new BMap.Map("app");          // 创建地图实例
   // 创建点坐标
 map.centerAndZoom('淮南');                 // 初始化地图，设置中心点坐标和地图级别
 map.addControl(new BMap.MapTypeControl()); //添加地图的控件
 // map.setCurrentCity('上海'); //设置地图显示的城市
 map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
 </script>
</html>

 案例1:

场景介绍:如果一个学校有两个校区,刚打开时显示一个校区的地图,十秒后转到另一个校区的地图

案例2:

5s后放大,缩小

第四课:

4.1 地图拖拽功能

4.2 描绘折线,计算两点间距离

http://lbsyun.baidu.com/index.php?title=jspopular/guide/conflux
  

 第五课.
5.1.添加 删除工具条、比例尺控件
5.1.1写布局样式
5.1.2添加事件
5.1.3 添加比例尽控件
ScaleControl
此类表示比例尺控件。
http://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference.html#a2b9
NavigationControl
此类表示地图的平移缩放控件，可以对地图进行上下左右四个方向的平移和缩放操作。
ControlAnchor
此常量表示控件的定位。
上代码:
效果:
 