学习地址:
素材地址:
 
第二课:学习笔记:
一.js引入百度地图
 

登陆上面的网址

创建一个 浏览器端应用

获取自己的密钥

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>

二.写html代码

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

效果:

设置显示中心点方法二:

 1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
5 <meta charset="utf-8">
6 <title>百度api</title>
7 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=nGt7wwtbLb4NrZDlgSobB9d7RdIeWvUD"></script>
8
9 <style type="text/css">
10 html,body,#app{
11 height:80%;
12 width:80%;
13 overflow:hidden;
14 }
15
16 </style>
17 </head>
18 <body>
19 <div id="app">
20
21 </div>
22 </body>
23 <script type="text/javascript">
24 var map = new BMap.Map("app"); // 创建地图实例
25 // 创建点坐标
26 map.centerAndZoom('淮南'); // 初始化地图,设置中心点坐标和地图级别
27 map.addControl(new BMap.MapTypeControl()); //添加地图的控件
28 // map.setCurrentCity('上海'); //设置地图显示的城市
29 map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
30 </script>
31 </html>
 案例1:
场景介绍:如果一个学校有两个校区,刚打开时显示一个校区的地图,十秒后转到另一个校区的地图

案例2:
5s后放大,缩小

第四课:
4.1 地图拖拽功能

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

第五课.

5.1.添加 删除工具条、比例尺控件
5.1.1写布局样式

5.1.2添加事件

5.1.3 添加比例尽控件
ScaleControl
此类表示比例尺控件。

NavigationControl
此类表示地图的平移缩放控件,可以对地图进行上下左右四个方向的平移和缩放操作。

ControlAnchor
此常量表示控件的定位。
上代码:

效果:

百度地图和高德地图的API视频教程的更多相关文章

  1. 百度地图和高德地图坐标系的互相转换 四种Sandcastle方法生成c#.net帮助类帮助文档 文档API生成神器SandCastle使用心得 ASP.NET Core

    百度地图和高德地图坐标系的互相转换   GPS.谷歌.百度.高德坐标相互转换 一.在进行地图开发过程中,我们一般能接触到以下三种类型的地图坐标系: 1.WGS-84原始坐标系,一般用国际GPS纪录仪记 ...

  2. arcgis api 3.x for js 入门开发系列十七在线天地图、百度地图、高德地图(附源码下载)

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

  3. iOS打开百度地图、高德地图导航

    1.判断手机里是否已经安装了百度地图或者高德地图: BOOL hasBaiduMap = NO; BOOL hasGaodeMap = NO; if ([[UIApplication sharedAp ...

  4. ios 一步一步学会自定义地图吹出框(CalloutView)-->(百度地图,高德地图,google地图)

    前言 在 ios上边使用地图库的同学肯定遇到过这样的问题:吹出框只能设置title和subtitle和左右的view,不管是百度地图还是高德地图还是自带的 google地图,只提供了这四个属性,如果想 ...

  5. 在WPF中使用谷歌地图和高德地图

    原文:在WPF中使用谷歌地图和高德地图 在桌面软件开发中可能会遇到这样的需求:显示地图. 常用的地图API有Google Map和高德地图.二者都提供了各种平台的API. 为了方便集成,本文使用Jav ...

  6. 百度地图、高德地图、Google地图等坐标系相关梳理

    1.地理坐标系与投影坐标系 地理坐标系也就是球面坐标系,是将本不是椭球体的地球进行椭球体化,从而形成球面坐标体系,国际标准的地理坐标系就是WGS-84坐标系: 只不过各个国家为了反映该国家所在区域地球 ...

  7. 百度地图和高德地图结合在web中的使用(二)

    百度地图在web中的使用(二) 背景:在做一个关于地理位置字段时,初始位置使用百度地图获取时失败,获取的位置信息不准确,奈何产品说友商好使的啊,F12看后是采用的高德,所以在这采用高德地图获取初始位置 ...

  8. [WEB地图] 2017高德地图API WEB开发(key申请,地图搭建)简约教程

      前端时间因为公司需要研究 了一下百度的教程 然后写个简约的笔记记录一下自己学习的收获,只为了满足自己暂时的写作热情   高德地图WEB开发(key申请.api)简约教程 1.首先我们需要去“高德地 ...

  9. 关于ArcGis for javascript整合百度地图 天地图 高德地图进行搜索

    1.ArcGis for javascript整合百度地图搜索 1.1.首先引入百度地图的api <!-- 引入百度地图API --> <script type="text ...

  10. Android笔记:百度地图与高德地图坐标转换问题

    安卓项目使用了百度地图的定位SDK,web端使用的也是百度地图, 后来发现界面显示百度地图不如高德效果好,web改用高德地图,原本的百度地图坐标是可以直接使用的,由于高德和百度地图的坐标系不一致 要如 ...

随机推荐

  1. [LOJ3054] 「HNOI2019」鱼

    [LOJ3054] 「HNOI2019」鱼 链接 链接 题解 首先想 \(O(n^3)\) 的暴力,不难发现枚举 \(A\) 和 \(D\) 后, \((B,C)\) 和 \((E,F)\) 两组点互 ...

  2. Python 工具包 werkzeug 初探

    首先,先向大家介绍一下什么是 werkzeug,Werkzeug是一个WSGI工具包,他可以作为一个Web框架的底层库.这里稍微说一下, werkzeug 不是一个web服务器,也不是一个web框架, ...

  3. 075 Sort Colors 分类颜色

    给定一个包含红色.白色和蓝色,且含有 n 个元素的数组,对它们进行排序,使得相同颜色的元素相邻,颜色顺序为红色.白色.蓝色.此题中,我们使用整数 0, 1 和 2 分别表示红色,白色和蓝色.注意:不能 ...

  4. [FACT_采购信息]增加了延期天数

    [延期天数]是指的采购单上的货品交货日期 减 [厂家来货]单据货品第一次到货日期. [FACT_采购信息] SELECT p.[Purchase_ID] [采购单号ID], p.[Supply_No] ...

  5. 朱晔的互联网架构实践心得S2E7:漫谈平台架构的工作(基础架构、基础服务、基础平台、基础中间件等等)

    前言 程序开发毕竟还不是搬砖这种无脑体力劳动,需要事先有标准,有架构,有设计,绝对不是新公司今天创立,明天就可以开始编码的.其实很多公司在起步的时候没有财力和资源建设独立的基础架构或平台架构部门,甚至 ...

  6. Java函数的传参机制

    一 最近的一个项目,里面各种返回void,参数用引用类型,那叫一个熟和多,但是也把我绕糊涂了. 我就打算好好理一理java的传参机制,整理一番 二 很多人一听Java的传参,那一定会脱口而出,java ...

  7. svn检出项目报错

    首先,我在浏览器访问svn检出项目地址是正常的,那么应该就是svn缓存的问题 1.         右键点击本地副本,TortoiseSVN -> Settings -> Saved Da ...

  8. MySQL 如何在一个语句中更新一个数值后返回该值 -- 自增长种子竞态问题处理

    什么是竞态问题? 假设有一个计数器,首先当前值自增长,然后获取到自增长之后的当前值.自增长后的值有可能被有些操作用来当做唯一性标识,因此并发的操作不能允许取得相同的值. 为什么不能使用使用UPDATE ...

  9. layout_weight属性

    layout_weight 某个控件text多行,第一行对齐,baselineAligned = "false" 可使控件对齐 weight 计算规则 剩余尺寸=父布局尺寸-子布局 ...

  10. 关于纠正《Hive权威指南》中的结论~“hive在使用set自定义变量时,hivevar命名空间是可选的”~的论证

    背景: 根据<Hive权威指南>上讲,在hive-0.8.0以后可以使用--define key=value命令定义用户自定义的变量以便在Hive脚本中引用.当用户使用这个功能时,Hive ...