HTML5在HTML4.01的基础上新增了一些特性#xff0c;从而可以让我们能够更快捷更方便的开发应用#xff0c;同时去掉了一些

在一个HTML5

HTML5在HTML4.01的基础上新增了一些特性从而可以让我们能够更快捷更方便的开发应用同时去掉了一些

在一个HTML5

canvas是HTML5中的新元素使用它我们就可以在页面上绘制图像了。

canvas标签定义的只是图形的容器或者说只是一块空白的画布。

图形的具体绘制通常是通过JavaScript完成。

创建画布Canvas

属性定义的画布的大小。

添加id是为了方便获取画布对应的这个DOM对象。

canvas

height100/canvas使用JavaScript绘制图像

获取画布

cdocument.getElementById(myCanvas);

var

//生成的上下文对象里面包含多种绘制图形的方法理解Canvas画布坐标

canvas

closePath();------关闭路径有两种可以使用closePath()

定义到起点

fill();------绘制路径默认没有颜色可以使用fillStyle“red“设置

lineWidth

beginPath();------用在一个路径结束开始下一个路径的时候可以设置

lineCap

initial-scale1.0titleDocument/title

/head

document.getElementById(myCanvas);//

获取contextvar

定义起点ctx.moveTo(0,0);ctx.lineTo(100,200);ctx.lineTo(380,420)//

关闭路径有两种方式可以使用closePath也可以使用lineTo00回到原点ctx.lineTo(0,0)//

ctx.closePath();//

initial-scale1.0titleDocument/title

/head

document.getElementById(myCanvas);//

获取contextvar

定义一条实线ctx.moveTo(0,100);ctx.lineTo(1000,100);ctx.lineWidth

2;ctx.strokeStyle

定义起点ctx.moveTo(100,100);ctx.lineTo(100,400);//

路径宽度ctx.lineWidth

green;ctx.stroke();ctx.beginPath();ctx.moveTo(200,100);ctx.lineTo(200,400);ctx.lineWidth

10;//

green;ctx.stroke();ctx.beginPath();ctx.moveTo(300,100);ctx.lineTo(300,400);ctx.lineWidth

10;//

miter默认值交点填充为多边形尖角bevel交点填充为三角形斜面round交点填充为扇形圆弧

!DOCTYPE

initial-scale1.0titleDocument/title

/head

document.getElementById(myCanvas);//

获取contextvar

定义起点ctx.moveTo(100,100);ctx.lineTo(200,250);ctx.lineTo(100,400);//

交点样式ctx.lineJoin

定义起点ctx.moveTo(200,100);ctx.lineTo(300,250);ctx.lineTo(200,400);//

交点样式ctx.lineJoin

定义起点ctx.moveTo(300,100);ctx.lineTo(400,250);ctx.lineTo(300,400);//

交点样式ctx.lineJoin

initial-scale1.0titleDocument/title

/head

document.getElementById(myCanvas);//

获取contextvar

定义起点ctx.moveTo(100,100);ctx.lineTo(100,400);//

虚线数组中的参数第一个线段的长度第二个参数间隔长度ctx.setLineDash([15,10])ctx.stroke();/script

/body

document.getElementById(myCanvas);

获取上下文

height矩形高度ctx.rect(50,50,150,250);ctx.stroke();

第三种//

height矩形高度ctx.strokeRect(50,50,150,250);//

第四种//

height矩形高度ctx.fillRect(50,50,150,250);clearRect()指定矩形区域的像素都变成透明。

如下

指定区域透明ctx.clearRect(80,80,80,80);

绘制图形_绘制弧线

x圆心横坐标y圆心纵坐标radius圆的半径startAngle扇形的起始角度endAngle扇形的终止角度anticlockwise可选逆时针画true顺时针画falsecanvas

idmyCanvas

document.getElementById(myCanvas);

获取上下文

绘制一个圆ctx.arc(100,100,50,0,2*Math.PI);ctx.stroke();

绘制上半个圆ctx.beginPath();ctx.arc(260,100,50,0,Math.PI,true);ctx.closePath();ctx.stroke();

绘制下半个圆ctx.beginPath();ctx.arc(400,100,50,0,Math.PI,false);ctx.closePath();ctx.stroke();//

绘制同心圆ctx.beginPath();ctx.arc(600,100,50,0,2*Math.PI);ctx.strokeStyle

orange;ctx.stroke();ctx.beginPath();ctx.arc(600,100,80,0,2*Math.PI);ctx.strokeStyle

orange;ctx.stroke();

第一个环ctx.beginPath();ctx.arc(200,400,100,0,2*Math.PI);ctx.lineWidth

10;ctx.strokeStyle

第二个环ctx.beginPath();ctx.arc(430,400,100,0,2*Math.PI);ctx.lineWidth

10;ctx.strokeStyle

第三个环ctx.beginPath();ctx.arc(660,400,100,0,2*Math.PI);ctx.lineWidth

10;ctx.strokeStyle

第四个环ctx.beginPath();ctx.arc(314,515,100,0,2*Math.PI);ctx.lineWidth

10;ctx.strokeStyle

第五个环ctx.beginPath();ctx.arc(545,515,100,0,2*Math.PI);ctx.lineWidth

10;ctx.strokeStyle

maxWidth文本的最大像素宽度。

该参数可选如果省略则表示宽度没有限制。

如果文本实际长度超过这个参数指定的值那么浏览器将尝试用较小的字体填充。

var

document.getElementById(myCanvas).getContext(2d);ctx.fillText(hello,100,100);ctx.strokeText(world,200,200)

fillText()方法

Verdana//字体大小为30px,字体类型为Verdana

ctx.fillText(hello,

ctx.textAligncenter//居中对齐ctx.textBaselinetype指定文本的垂直位置

ctx.textBaselinebottom//基线在底端!DOCTYPE

html

initial-scale1.0titleDocument/title

/head

document.getElementById(myCanvas).getContext(2d);//

定义一条垂直线ctx.beginPath();ctx.moveTo(100,100);ctx.lineTo(100,1000);ctx.lineWidth

1;ctx.strokeStyle

定义一条水平线ctx.beginPath();ctx.moveTo(100,200);ctx.lineTo(1000,200);ctx.lineWidth

1;ctx.strokeStyle

red;ctx.stroke();ctx.beginPath();//

设置字体样式ctx.font

绘制实心字体第一个参数需要绘制的字符串第二个参数文字起点的横坐标第三个参数纵坐标开始的位置ctx.fillText(hello,100,100);ctx.beginPath();//

设置字体样式ctx.font

绘制空心字体第一个参数需要绘制的字符串第二个参数文字起点的横坐标第三个参数纵坐标开始的位置ctx.strokeText(world,200,200)/script

/body

y1)定义渐变线的起点终点确定颜色渐变方向返回一个CanvasGradient对象

x0是起点的横坐标y0是起点的纵坐标x1是终点的横坐标y1是终点的纵坐标

CanvasGradient.addColorStop(num,color)指定渐变点的颜色

num第一个参数是0到1之间的一个数字代表渐变点的位置0表示起点1表示终点color表示该渐变点的颜色

!DOCTYPE

initial-scale1.0titleDocument/title

/head

document.getElementById(myCanvas).getContext(2d);//

grd

ctx.createLinearGradient(100,300,300,100);//

1之间grd.addColorStop(0,red);grd.addColorStop(0.5,yellow);grd.addColorStop(1,pink);//

grd;//

填充矩形ctx.fillRect(100,100,300,300);/script

/body

y1,r1)定义渐变线的起点终点确定颜色渐变方向返回一个CanvasGradient对象

x0是辐射起始的圆的圆心横坐标y0是辐射起始的圆的圆心纵坐标r0是起始圆的半径x1是辐射终止的圆的圆心横坐标y1是辐射终止的圆的圆心纵坐标r1是终止圆的半径

CanvasGradient.addColorStop(num,color)指定渐变点的颜色

num第一个参数是0到1之间的一个数字代表渐变点的位置0表示起点1表示终点color表示该渐变点的颜色

!DOCTYPE

initial-scale1.0titleDocument/title

/head

document.getElementById(myCanvas).getContext(2d);//

grd

ctx.createRadialGradient(150,150,50,150,150,100);//

1之间grd.addColorStop(0,red);grd.addColorStop(0.4,yellow);grd.addColorStop(0.6,green);grd.addColorStop(0.8,orange);grd.addColorStop(1,pink);//

grd;//

ctx.fillRect(50,50,200,200);ctx.arc(150,150,110,0,2*Math.PI)ctx.fill();/script

/body

ctx.createPattern(img,repeatType)定义图像样式返回值是一个CanvasPattern对象。

img是图像数据它可以是img元素也可以是另一个canvas元素。

repeatType设置图片重复方式有四个可能的值分别是repeat双向重复、repeat-x(水平重复)、repeat-y(垂直重复)、no-repeat(不重复)。

如果是空字符串或null则等同于repeat。

!DOCTYPE

initial-scale1.0titleDocument/title

/head

document.getElementById(canvas1).getContext(2d);var

grd

ctx1.createRadialGradient(500,500,300,500,500,500);grd.addColorStop(0.2,red);grd.addColorStop(0.4,yellow);grd.addColorStop(0.6,orange);grd.addColorStop(0.8,green);grd.addColorStop(1,pink);ctx1.fillStyle

grd;ctx1.fillRect(0,0,1000,1000)//

获取画布和上下文var

document.getElementById(myCanvas).getContext(2d);//

创建imgvar

ctx.createPattern(img,no-repeat);//

使用canvas创建图片样式//

ctx.createPattern(document.getElementById(canvas1),no-repeat);//

填充样式为图片ctx.fillStyle

圆ctx.arc(500,500,500,0,2*Math.PI);ctx.fill();}/script

/body

ctx.shadowOffsetX阴影的水平位移默认为00向右偏移0向左偏移。

ctx.shadowOffsetY阴影的垂直位移默认为00向下偏移0向上偏移。

ctx.shadowBlur阴影的模糊程度默认为0值越大模糊程度越高。

!DOCTYPE

initial-scale1.0titleDocument/title

/head

document.getElementById(myCanvas).getContext(2d);//

阴影颜色ctx.shadowColor

绘制矩形ctx.fillRect(10,10,200,200);ctx.strokeStyle

green;ctx.strokeRect(300,300,200,200);/script

/body

ctx.drawImage(img,x,y)用于将图像绘制到画布

img图像数据可以是img元素也可以是canvas元素x在目标

canvas

initial-scale1.0titleDocument/title

/headbodycanvas

document.getElementById(myCanvas).getContext(2d);//

绘制一个矩形ctx.fillStyle

第一个参数画像x开始绘画的横坐标y开始绘画的纵坐标ctx.drawImage(img,

y);}}//

initial-scale1.0titleDocument/title

/head

document.getElementById(myCanvas).getContext(2d);//

定义图片var

200放大的高度ctx.drawImage(img,0,0,200,200);}/script

/body

initial-scale1.0titleDocument/title

/headbodycanvas

document.getElementById(myCanvas).getContext(2d);function

draw(x,

剩余的8个参数前4个是定义图像源的切片位置和大小后4个则是定义切片的目标显示位置和大小。

!DOCTYPE

initial-scale1.0titleDocument/title

/head

document.getElementById(myCanvas).getContext(2d);//

定义imgvar

绘画切片之前的图片ctx.drawImage(img,0,0);//

img图像资源

100切后开始绘画的横坐标100切后开始绘画的纵坐标150切后绘画的宽度150切后绘画的高度ctx.drawImage(img,30,30,50,50,100,100,150,150);}/script

/body

ctx.save()将画布的当前状态保存起来相当于在内存之中产生一个样式快照

一个绘画状态包括

initial-scale1.0titleDocument/title

/head

document.getElementById(myCanvas).getContext(2d);//

绘制矩形ctx.fillRect(0,0,300,300);//

填充颜色ctx.fillStyle

绘制矩形ctx.fillRect(30,30,240,240);//

填充颜色ctx.fillStyle

绘制矩形ctx.fillRect(60,60,180,180);//

调用第二次保存的状态样式ctx.restore();ctx.fillRect(90,90,120,120);//

调用第一次默认样式状态ctx.restore();ctx.fillRect(120,120,60,60);/script

/body

是左右偏移量x0向右平移x0向左平移y是上下偏移量y0向下平移y0向上平移!DOCTYPE

html

initial-scale1.0titleDocument/title

/head

document.getElementById(myCanvas).getContext(2d);for(var

i0;i2;i){for(var

绘制矩形ctx.fillRect(0,0,20,20);}}/script

/body

angle旋转的角度(angle)它是顺时针方向的以弧度为单位的值。

!DOCTYPE

initial-scale1.0titleDocument/title

/head

document.getElementById(myCanvas).getContext(2d);//

(var

旋转60度180/360ctx.rotate(Math.PI/3);//

[red,green,pink,orange,yellow,blue][i-1];//

绘制圆ctx.arc(0,30,10,0,2*Math.PI);ctx.fill();}/script

/body

默认情况下一个单位就是一个像素缩放因子可以缩放单位比如缩放因子0.5表示将大小缩小为原来的50%缩放因子10表示放大十倍。

1)为水平翻转ctx.scale(1,

initial-scale1.0titleDocument/title

/head

document.getElementById(myCanvas).getContext(2d);//

保存默认状态ctx.save();//

绘制矩形ctx.fillRect(0,20,100,100);//

缩放缩小到原来的一倍ctx.scale(0.5,0.5);//

填充颜色ctx.fillStyle

绘制矩形缩小了一倍想让是同一个原点020就需要在缩放后的坐标也变成0200.5*4020ctx.fillRect(0,40,100,100);//

绘制x轴坐标ctx.beginPath();ctx.moveTo(0,0);ctx.lineTo(600,0);ctx.fillStyle

black;ctx.stroke()//

绘制矩形ctx.fillRect(0,20,100,100);//

缩放缩小到原来的一倍ctx.scale(0.5,0.5);//

填充颜色ctx.fillStyle

绘制矩形缩小了一倍想让是同一个原点020就需要在缩放后的坐标也变成0200.5*4020ctx.fillRect(0,40,100,100);/script

/body

f)接受变换矩阵的六个元素作为参数完成缩放、平移和倾斜等变形。

ax轴方向缩放bx轴方向倾斜cy轴方向倾斜dy轴方向缩放ex轴方向平移fy轴方向平移

变换矩阵

f重置并创建新的变换矩阵ctx.resetTransform()重置当前变形为单位矩阵它和调用以下语句是一样的ctx.setTransform(1,

0);!DOCTYPE

initial-scale1.0titleDocument/title

/head

document.getElementById(myCanvas).getContext(2d);ctx.fillRect(0,0,100,100);//

缩放//

ctx.transform(0.5,0,0,0.5,0,0);//

偏移//

ctx.transform(1,0,0,1,50,50);//

倾斜//

综合变形ctx.transform(0.5,1,0,0.5,50,50);ctx.fillRect(0,300,100,100)//

重置并创建自己的变化矩阵ctx.setTransform(0.5,0,0,0.5,0,0);ctx.fillRect(0,500,100,100)/script

/body

ctx.clip()将构建的路径转换为裁剪路径裁切路径确定好之后再绘制图形裁切路径内的图形可以显示裁切路径外的图形不显示。

默认情况下canvas

initial-scale1.0titleDocument/title

/head

document.getElementById(myCanvas).getContext(2d);//

绘制一个矩形ctx.fillRect(0,0,100,100);//

绘制一个圆ctx.arc(50,50,30,0,2*Math.PI);//

裁切裁切后在区域范围内会显示之外的不显示ctx.clip();//

填充颜色ctx.fillStyle

绘制一个跟之前一样的矩形会覆盖之前绘制的矩形ctx.fillRect(0,0,100,100)/script

/body

initial-scale1.0titleDocument/title

/headbodycanvas

document.getElementById(myCanvas).getContext(2d);//

75);//

逆时针旋转90度是为了让时间刻度旋转从12点的位置开始ctx.rotate(-Math.PI

2);//

因为设置了定时器一秒之后开始页面会出现以秒的空白所以这里调用一次clock();function

clock()

因为每次都需要在原来的基础上绘制一次矩形所以可以第二次绘制的时候把第一次的删除

掉ctx.clearRect(-75,

绘制跟画布一样大小的矩形因为之前将原点移到了中心绘制矩形的时候顶点坐标-75-75ctx.fillRect(-75,

-75,

6);ctx.beginPath();ctx.moveTo(68,

0);ctx.lineTo(75,

{ctx.beginPath();ctx.moveTo(72,

0);ctx.lineTo(75,

调用之前保存的状态让其从12点的位置开始旋转ctx.restore();//

保存当前状态ctx.save();//

3600));ctx.beginPath();ctx.lineWidth

5;//

-10起点在原点的后面让其穿过原点ctx.moveTo(-10,

0);ctx.lineTo(40,

调用之前保存的状态让其从12点的位置开始旋转ctx.restore();//

保存当前状态ctx.save();//

60));ctx.beginPath();ctx.lineWidth

4;//

-10起点在原点的后面让其穿过原点ctx.moveTo(-10,

0);//

调用之前保存的状态让其从12点的位置开始旋转ctx.restore();//

保存当前状态ctx.save();//

sec);ctx.beginPath();ctx.lineWidth

2;//

-10起点在原点的后面让其穿过原点ctx.moveTo(-10,

0);ctx.lineTo(60,

绘制时分秒针的交点ctx.beginPath();ctx.arc(0,

给秒针末端绘制空心圆ctx.beginPath();ctx.arc(65,

让秒针动起来调用之前保存的秒针状态ctx.restore()}setInterval(()

{clock()},

initial-scale1.0titleDocument/title

/headbodycanvas

document.getElementById(myCanvas)var

ctx

每次都要重新绘制一次画布第二次开始的时候可以将第一次的删除ctx.clearRect(0,

500,

block;ctx.strokeRect(0,0,500,500);//

20,

window.requestAnimationFrame(anim);}anim();//

添加鼠标监听事件小球随着鼠标移动c.addEventListener(mousemove,function(e){window.cancelAnimationFrame(raf);x

e.offsetX;y

添加点击监听事件点击的时候小球绘制自由移动c.addEventListener(click,function(e){anim();})/script

/body/html

initial-scale1.0titleDocument/titlestyle#con{width:

200px;height:

xmlnshttp://www.w3.org/2000/svg

version1.1

initial-scale1.0titleDocument/title

/headbodybodysvg

xmlnshttp://www.w3.org/2000/svg

version1.1circle

增加一个点击的事件监听document.getElementById(greencircle).addEventListener(click,function(e){console.log(e);})/script/body/html

SVG_矩形

fill属性定义矩形的填充色stroke定义矩形的边框颜色stroke-width定义边框线条的宽度svg

xmlnshttp://www.w3.org/2000/svg

version1.1

stylefill:blue;stroke:pink;stroke-width:5;

//svgSVG

SVG绘制出来的每一个图形的元素都是独立的DOM节点能够方便的绑定事件或用来修改。

逐像素渲染的。

也就是说它绘制一个复杂的图形和一个简单的图形的性能是差不多的。

SVG

方式绘制方式产出性能失真Canvasjs图形都属于完整的画布是一个整体高复杂度跟简单的图形性能差不多放大后会失真SVGXML每个图形都是独立的DOM节点复杂度高会减慢渲染速度放大后不会失真

HTML5_MathML

是数学标记语言是一种基于XML的标准用来书写数学符号和公式的置标语言。

HTML5

mrow....../mrow用于包裹一个或多个表达式可省略。

msup....../msup用于包裹上标的表达式如指数函数。

msub....../msub用于包裹下标的表达式。

mi........./mi

用于包裹字符。

mn........./mn用于包裹数字。

mo.........../mo用于包裹各种运算符号。

msqrt........../msqrt用于开根号。

mfenced

open[

用于包裹矩阵即先定义外围的括号。

mtable........../mtable

类似table。

mtr........../mtr代表矩阵的行。

mtd........./mtd:

MathML

xmlnshttp://www.w3.org/1998/Math/MathML!--

mrow:包裹一个或多个表达式

--mo/momrowmn4/mnmix/mi/mrowmo/momn4/mn/mrowmo/momn0/mn/mrow/mathHTML5_拖放Drag

Drop

ondragstartdragstart(event)我是可拖拽内容

scriptfunction

dragstart(e){console.log(e)//打印事件对象}

/script定义拖拽数据

event拖拽事件对象都有一个dataTransfer属性它持有拖拽数据。

这个属性也有管理拖拽数据的方法。

setData(数据类型数据值)方法可以为拖拽数据添加一个项。

function

dragstart(e){console.log(e)//打印事件对象//

添加拖拽数据e.dataTransfer.setData(text/plain,

定义拖拽图像

dataTransfer.setDragImage(image,

xOffset,

{e.dataTransfer.setData(text/plain,

e.target.innerText)console.log(e)//

设置拖拽图片e.dataTransfer.setDragImage(img,

10,

ondragover当元素被拖到放置区上时触发这个时候可以去检验拖拽数据的类型返回false则阻止放置返回true则允许放置。

ondrop当元素在放置区被放置时触发。

h5放置区域/h5

stylewidth:200px;height:200px;border:3px

solid

initial-scale1.0titleDocument/title

/head

ondragstartdragstart(event)我是一个可以拖拽的文本/ph5放置区域/h5div

stylewidth:

设置拖拽数据e.dataTransfer.setData(text/plain,e.target.innerText);//

设置拖拽的图片e.dataTransfer.setDragImage(img,10,10);}function

dragover(e){e.preventDefault();if(e.dataTransfer.types.includes(text/plain)){return

true;//

e.dataTransfer.getData(text/plain);e.target.innerText

data;}/script

保存数据localStorage.setItem(key,value)或者localStorage.keyvalue

读取数据localStorage.getItem(key)或者localStorage.key

删除单个数据localStorage.removeItem(key)

得到某个索引的keylocalStorage.key(index)

!DOCTYPE

initial-scale1.0titleDocument/title

/head

设置内容localStorage.setItem(name,hengzhong);localStorage.setItem(age,20);//

获取设置的内容console.log(localStorage.getItem(name));console.log(localStorage.getItem(age));//

通过下标获得设置的内容localStorage.key(index)console.log(localStorage.key(0));console.log(localStorage.key(1));//

删除内容setTimeout(()

localStorage.removeItem(name);//

3000);}else{//

sessionStorage当用户关闭浏览器窗口后数据会被删除

保存数据sessionStorage.setItem(key,value)或者sessionStorage.keyvalue读取数据sessionStorage.getItem(key)或者sessionStorage.key删除单个数据sessionStorage.removeItem(key)删除所有数据sessionStorage.clear()得到某个索引的keysessionStorage.key(index)

!DOCTYPE

initial-scale1.0titleDocument/title

/head

判断sessionStorage类型:if(typeof(sessionStorage)

!undefined){//

设置存储数据sessionStorage.setItem(name,hengzhong);sessionStorage.setItem(age,18);//

获取存储数据//

sessionStorage.key(index)console.log(sessionStorage.getItem(name));console.log(sessionStorage.getItem(age));console.log(sessionStorage.key(0));console.log(sessionStorage.key(1));setTimeout(()

{//

删除存储的指定数据sessionStorage.removeItem(age);//

3000);}else{//

if(typeof(Worker)!undefined){//

Web

Worker(./demo_workers.js);3.定义worker具体任务

//worker.js

setInterval(function(){ii1postMessage(i)

发送消息postMessage(消息)

setTimeout(function(){ii1postMessage(i)//使用postMessage(数据)发送

},1000)添加onmessage事件监听器监听接收消息访问event.data获得消息

w.onmessage

{document.getElementById(result).innerHTML

w.terminate();

线程无法读取本地文件即不能打开本机的文件系统file://它所加载的脚本必须来自网络。

serve

initial-scale1.0titleDocument/title

onclickstopWorker()点击结束Worker/buttonscript//

判断Worker

{document.getElementById(result).innerHTML

e.data;}function

rem它就是一个css单位代表元素字体的大小指相对于根元素的字体大小的单位

根元素字体大小

initial-scale1.0titleDocument/titlestyle#box{width:

1rem;;height:

function(){document.documentElement.style.fontSize

(document.documentElement.clientWidth

750)

function(){document.documentElement.style.fontSize

(document.documentElement.clientWidth

750)

initial-scale1.0titleDocument/titlestylebody{margin:

0;padding:

srchttps://gw.alicdn.com/imgextra/i4/O1CN019XWXNq1aAPOVMYSiu_!!6000000003289-2-tps-167-63.png

alt/divdiv

srchttps://gw.alicdn.com/imgextra/i4/O1CN01ftum4629SHP6bCqTm_!!6000000008066-2-tps-99-99.png

alt/div/headerscriptwindow.onload

function(){//

这里的1113就是你开发的时候所用设备的屏幕可以在控制台的console中通过window.innerWidht获得document.documentElement.style.fontSize

(document.documentElement.clientWidth

1113)

function(){document.documentElement.style.fontSize

(document.documentElement.clientWidth

1113)

百度地图提供了一套由JavaScript语言编写的应用程序接口该套接口目前最新版本为JavaScript

API

使用这些接口我们就可以在页面上构建功能丰富、交互性强的地图应用。

接口使用方法

地图开发百度地图API是一套为开发者提供的基于百度地图的应用程序接口包括JavaScript、iOS、Andriod、静态地图、Web服务等多种版本提供基本地图、位置搜索、周边搜索、公交驾车导航、定位服务、地理编码及逆地理编码等丰富功能。

LBS·云是百度地图针对LBS开发者全新推出的平台级服务。

通过地图API一方面解决移动开发者服务器端日益增长的海量位置数据的存储维护压力另一方面彻底解决所有LBS开发者基于位置数据的高并发检索瓶颈。

https://lbsyun.baidu.com/

申请成为百度开发者

srchttps://api.map.baidu.com/api?v1.0typewebglak你的密钥/script创建地图容器元素

div

idcontainer/div创建地图实例其参数可以是元素id也可以是元素对象

var

//第一个参数为经度第二个参数为纬度地图初始化同时设置地图展示级别地图展示级别范围1-21

15);

//第一个参数为中心点坐标第二个参数为地图级别开启鼠标滚轮缩放

map.enableScrollWheelZoom(true);

//开启鼠标滚轮缩放!DOCTYPE

initial-scale1.0titleDocument/titlescript

srchttps://api.map.baidu.com/api?v1.0typewebglakPKzEC0PFNFaT789e0KYtbhEMTRGuvtbA/scriptstyle#container{width:

1000px;height:

BMapGL.Map(container);//第一个参数为经度第二个参数为纬度var

point

BMapGL.Point(116.404,39.915);//第一个参数为中心点坐标第二个参数为地图级别map.centerAndZoom(point,15);//开启鼠标滚轮缩放map.enableScrollWheelZoom(true);

/script

BMapGL.Map(container)//生成地图实例var

centerPointnew

39.915)//设置地图的中心点map.centerAndZoom(centerPoint,1)//初始化地图map.enableScrollWheelZoom(true)//开启鼠标滚轮缩放map.setMapType(BMAP_EARTH_MAP)//设置地图类型为地球百度地图_添加控件

控件是负责与地图交互的UI元素百度地图API支持比例尺、缩放、定位、城市选择列表、版权。

完成地图初始化

map.addControl(scaleCtrl);//添加比例尺控件添加缩放控件

var

BMapGL.LocationControl()//实例化控件

map.addControl(locationCtrl)//添加定位控件

!DOCTYPE

initial-scale1.0titleDocument/titlescript

srchttps://api.map.baidu.com/api?v1.0typewebglakPKzEC0PFNFaT789e0KYtbhEMTRGuvtbA/scriptstyle#container{width:

1000px;height:

BMapGL.Map(container);//第一个参数为经度第二个参数为纬度var

point

BMapGL.Point(116.404,39.915);//第一个参数为中心点坐标第二个参数为地图级别map.centerAndZoom(point,15);//开启鼠标滚轮缩放map.enableScrollWheelZoom(true);

设置地图类型为地球//

map.setMapType(BMAP_EARTH_MAP);//

添加控件//

BMapGL.ScaleControl();map.addControl(scaleCtr);//

添加缩放控件var

BMapGL.ZoomControl();map.addControl(zoomCtr);//

添加城市列表控件var

BMapGL.CityListControl();map.addControl(cityLCtr);//

添加定位控件var

BMapGL.LocationControl();map.addControl(locationCtr);/script

/body

初始化控件时可提供一个可选参数是一个json对象里面有个属性anchor表示控件的停靠位置即控件停靠在地图的哪个角。

当地图尺寸发生变化时控件会根据停靠位置的不同来调整自己的位置。

anchor值位置说明BMAP_ANCHOR_TOP_LEFT表示控件定位于地图的左上角BMAP_ANCHOR_TOP_RIGHT表示控件定位于地图的右上角BMAP_ANCHOR_BOTTOM_LEFT表示控件定位于地图的左下角BMAP_ANCHOR_BOTTOM_RIGHT表示控件定位于地图的右下角

var

BMapGL.ScaleControl({anchor:BMAP_ANCHOR_TOP_LEFT})//实例化控件的时候可以传递一个可选参数为一个jsonmap.addControl(scaleCtrl)

控件位置偏移

除了指定停靠位置外还可以通过偏移量来指示控件距离地图边界有多少像素。

var

BMapGL.ScaleControl({anchor:BMAP_ANCHOR_TOP_RIGHT,//offset为一个Size的实例接受的俩个参数分别代表水平方向距离跟垂直方向距离offset:new

BMapGL.Size(10,10)})

map.addControl(scaleCtrl)//添加比例尺控件!DOCTYPE

html

initial-scale1.0titleDocument/titlescript

srchttps://api.map.baidu.com/api?v1.0typewebglakPKzEC0PFNFaT789e0KYtbhEMTRGuvtbA/scriptstyle#container{width:

1000px;height:

BMapGL.Point(116.404,39.915);//第一个参数为中心点坐标第二个参数为地图级别map.centerAndZoom(point,15);//

滑轮滚动缩放map.enableScrollWheelZoom(true);//

地图样式//

map.setMapType(BMAP_EARTH_MAP);//

添加控件//

BMapGL.ScaleControl({anchor:BMAP_ANCHOR_TOP_RIGHT,offset:new

BMapGL.Size(20,20)});map.addControl(sc);//

添加缩放控件var

BMapGL.ZoomControl();map.addControl(zc,);//

添加城市列表var

BMapGL.CityListControl();map.addControl(clc);//

添加定位控件var

BMapGL.LocationControl();map.addControl(lc);/script

/body

BMapGL.Point(116.387112,39.920977),new

BMapGL.Point(116.385243,39.913063),new

BMapGL.Point(116.394226,39.917988),new

BMapGL.Point(116.401772,39.921364),new

BMapGL.Point(116.41248,39.927893)],

{strokeColor:blue,

map.addOverlay(polygon);删除覆盖物map.removeOverlay(具体覆盖物实例)或者map.clearOverlays()

var

map.removeOverlay(overlays[0])//删除对应的覆盖物

//map.clearOverlays()//删除地图上所有的覆盖物

监听覆盖物事件

overlay.addEventListener(事件名称callback)

function(e){

initial-scale1.0titleDocument/titlescript

srchttps://api.map.baidu.com/api?v1.0typewebglakPKzEC0PFNFaT789e0KYtbhEMTRGuvtbA/scriptstyle#container

{width:

BMapGL.Map(container);//第一个参数为经度第二个参数为纬度var

point

39.915);//第一个参数为中心点坐标第二个参数为地图级别map.centerAndZoom(point,

15);//开启鼠标滚轮缩放map.enableScrollWheelZoom(true);//

创建标注点Markervar

BMapGL.Marker(point);map.addOverlay(marker);//

添加多边形Polygon)var

获取地图上所有覆盖物map.removeOverlay(overlays[0]);//

添加覆盖监听事件polygon.addEventListener(click,function(e){console.log(e);})/script

/body/html

initial-scale1.0titleDocument/titlescript

srchttps://api.map.baidu.com/api?v1.0typewebglakPKzEC0PFNFaT789e0KYtbhEMTRGuvtbA/scriptstyle#container{width:

1000px;height:

BMapGL.Map(container);//第一个参数为经度第二个参数为纬度var

point

BMapGL.Point(116.404,39.915);//第一个参数为中心点坐标第二个参数为地图级别map.centerAndZoom(point,15);//开启鼠标滚轮缩放map.enableScrollWheelZoom(true);

定义标注图标var

BMapGL.Marker(point,{icon:myIcon});map.addOverlay(marker);/script

/body

initial-scale1.0titleDocument/titlescript

srchttps://api.map.baidu.com/api?v1.0typewebglakPKzEC0PFNFaT789e0KYtbhEMTRGuvtbA/scriptstyle#container{width:

1000px;height:

BMapGL.Map(container);//第一个参数为经度第二个参数为纬度var

point

BMapGL.Point(116.404,39.915);//第一个参数为中心点坐标第二个参数为地图级别map.centerAndZoom(point,15);//开启鼠标滚轮缩放map.enableScrollWheelZoom(true);

添加文本标注var

BMapGL.Label(BOSS,{position:point,offset:new

BMapGL.Size(-20,-30)});map.addOverlay(label);//

设置样式label.setStyle({color:red,borderColor:transparent,backgroundColor:transparent})//

添加事件监听label.addEventListener(click,function(e){console.log(e);})/script

/body

Geocoder.getPoint(具体地址,callback)

创建地址解析器实例

//通过具体地址获得该地址对应的地理位置的经纬度坐标并进行使用

geocoder.getPoint(北京市清华大学,function(p){console.log(p)map.centerAndZoom(p,15)var

markernew

BMapGL.Marker(p)map.addOverlay(marker)

},北京市)在调用Geocoder.getPoint()方法时您需要提供地址解析所在的城市。

Geocoder.getLocation(Point,callback)

map.addEventListener(click,function(e){console.log(e)//根据地理经纬度坐标获取具体地址信息geocoder.getLocation(e.latlng,function(result){console.log(result)})})

!DOCTYPE

initial-scale1.0titleDocument/titlescript

srchttps://api.map.baidu.com/api?v1.0typewebglakPKzEC0PFNFaT789e0KYtbhEMTRGuvtbA/scriptstyle#container{width:

1000px;height:

BMapGL.Map(container);//第一个参数为经度第二个参数为纬度var

point

BMapGL.Point(116.404,39.915);//第一个参数为中心点坐标第二个参数为地图级别map.centerAndZoom(point,15);//开启鼠标滚轮缩放map.enableScrollWheelZoom(true);

创建地址解析器var

地址解析geocoder.getPoint(兰州交通大学,function(p){console.log(p);map.centerAndZoom(p,15);var

marker

BMapGL.Marker(p);map.addOverlay(marker);},兰州市)//

逆地址解析map.addEventListener(click,function(e){console.log(e);geocoder.getLocation(e.latlng,function(result){var

arr

result.businessarr.push(addr)arr.join()console.log(arr[0]);})})/script

/body

{geocoder.getLocation(e.latlng,

function

str当前地址为result.address//实例化信息窗口var

infowindow

在地图上打开信息窗口map.openInfoWindow(infowindow,

e.latlng)})})同一时刻只能有一个信息窗口在地图上打开

!DOCTYPE

initial-scale1.0titleDocument/titlescript

srchttps://api.map.baidu.com/api?v1.0typewebglakPKzEC0PFNFaT789e0KYtbhEMTRGuvtbA/scriptstyle#container{width:

1000px;height:

BMapGL.Map(container);//第一个参数为经度第二个参数为纬度var

point

BMapGL.Point(116.404,39.915);//第一个参数为中心点坐标第二个参数为地图级别map.centerAndZoom(point,15);//开启鼠标滚轮缩放map.enableScrollWheelZoom(true);

创建地图解析实例var

添加事件监听点击哪里获得坐标map.addEventListener(click,function(e){console.log(e);//

逆向解析地图geocoder.getLocation(e.latlng,function(result){var

str

BMapGL.InfoWindow(str,{width:100,height:50,title:提示})map.openInfoWindow(infowindow,e.latlng);})})/script

/body

initial-scale1.0titleDocument/titlescript

srchttps://api.map.baidu.com/api?v1.0typewebglakPKzEC0PFNFaT789e0KYtbhEMTRGuvtbA/scriptstyle#container

{width:

BMapGL.Map(container);//第一个参数为经度第二个参数为纬度var

point

39.915);//第一个参数为中心点坐标第二个参数为地图级别map.centerAndZoom(point,

15);//开启鼠标滚轮缩放map.enableScrollWheelZoom(true);//

driving

获取起点坐标document.querySelector(#start).onblur

function

{geocoder.getPoint(e.target.value,

function

获取终点坐标document.querySelector(#end).onblur

function

{geocoder.getPoint(e.target.value,

function

发起检索document.querySelector(#btn).onclick

function

initial-scale1.0titleDocument/titlescript

srchttps://api.map.baidu.com/api?v1.0typewebglakPKzEC0PFNFaT789e0KYtbhEMTRGuvtbA/scriptstyle#container

{width:

BMapGL.Map(container);//第一个参数为经度第二个参数为纬度var

point

39.915);//第一个参数为中心点坐标第二个参数为地图级别map.centerAndZoom(point,

15);//开启鼠标滚轮缩放map.enableScrollWheelZoom(true);//

transit

plan.getDuration(true);document.querySelector(.result).innerHTML

总路程为distance

获取起点坐标document.querySelector(#start).onblur

function

{geocoder.getPoint(e.target.value,

function

获取终点坐标document.querySelector(#end).onblur

function

{geocoder.getPoint(e.target.value,

function

发起检索document.querySelector(#btn).onclick

function

initial-scale1.0titleDocument/titlescript

srchttps://api.map.baidu.com/api?v1.0typewebglakPKzEC0PFNFaT789e0KYtbhEMTRGuvtbA/scriptstyle#container

{width:

BMapGL.Map(container);//第一个参数为经度第二个参数为纬度var

point

39.915);//第一个参数为中心点坐标第二个参数为地图级别map.centerAndZoom(point,

15);//开启鼠标滚轮缩放map.enableScrollWheelZoom(true);//

walking

获取起点坐标document.querySelector(#start).onblur

function

{geocoder.getPoint(e.target.value,

function

获取终点坐标document.querySelector(#end).onblur

function

{geocoder.getPoint(e.target.value,

function

发起检索document.querySelector(#btn).onclick

function

BMapGL.Geolocation();//获取定位并传递回调函数geolocation.getCurrentPosition(function

(r)

{console.log(r)//判断返回的状态码是否为成功if

BMAP_STATUS_SUCCESS)

BMapGL.Marker(r.point);map.addOverlay(mk);//将地图的中心改为指定的点map.panTo(r.point);alert(您的位置

r.point.lng

BMapGL.LocalCity();myCity.get(function(result){var

cityName

result.name;//设置地图中心点参数除了可以为坐标点以外还支持城市名map.setCenter(cityName);console.log(当前定位城市:

html

initial-scale1.0titleDocument/titlescript

srchttps://api.map.baidu.com/api?v1.0typewebglakPKzEC0PFNFaT789e0KYtbhEMTRGuvtbA/scriptstyle#container

{width:

BMapGL.Map(container);//第一个参数为经度第二个参数为纬度var

point

39.915);//第一个参数为中心点坐标第二个参数为地图级别map.centerAndZoom(point,

15);//开启鼠标滚轮缩放map.enableScrollWheelZoom(true);//

geolocation

获取定位并传递回调函数geolocation.getCurrentPosition(function

(r)

BMapGL.Marker(r.point);map.addOverlay(marker);//

将地图的中心改为指定的点map.panTo(r.point);alert(您的位置

r.point.lat

BMapGL.LocalCity();mycity.get(function

(r)

r.name;map.setCenter(cityName);console.log(当前定位城市:

cityName);})/script

您可以自定义从地图上某一地点切换到另一地点的3D过渡动画效果。

初始化地图

BMapGL.Point(116.40396298757886,

39.91511908708907),

定义第一个关键帧处于动画过程的百分比取值范围0~1},{center:

new

BMapGL.Point(116.38096834279554,

39.9156803086881),

BMapGL.ViewAnimation(keyFrames,

opts);

map.startViewAnimation(animation);

//传入动画实例强制停止动画

map.cancelViewAnimation(animation);

强制停止动画!DOCTYPE

initial-scale1.0titleDocument/titlescript

srchttps://api.map.baidu.com/api?v1.0typewebglakPKzEC0PFNFaT789e0KYtbhEMTRGuvtbA/scriptstyle#container

{width:

BMapGL.Map(container);//第一个参数为经度第二个参数为纬度var

point

39.915);//第一个参数为中心点坐标第二个参数为地图级别map.centerAndZoom(point,

15);//开启鼠标滚轮缩放map.enableScrollWheelZoom(true);//

自定义关键帧var

BMapGL.Point(116.40396298757886,

39.91511908708907),

定义第一个关键帧处于动画过程的百分比取值范围0~1},{center:

new

BMapGL.Point(116.38096834279554,

39.9156803086881),

定义第二个关键帧处于动画过程的百分比取值范围0~1},];//

设置动画属性var

BMapGL.ViewAnimation(keyFrames,

opts);//

播放动画map.startViewAnimation(animation);//传入动画实例setTimeout(()

{//

强制停止动画map.cancelViewAnimation(animation);

强制停止动画},