html5地图,html5地图导航

html5地理定位api怎么连接百度地图

可以实现的，HTML5可以使用手机的GPS信息，利用百度等地图的开放API就可以了。

HTML5中可以通过IP，WIFI信息，GPS，来实现地理定位，当然相关精度也是有所不同，所以如果要精确导航就得使用GPS信息。

下面是一段HTML5结合百度地图API来获取位置的代码：

div id="allmap"/div当前定位地址：a id="du-gps"/aspan/span/div

script

var map = new BMap.Map("allmap");

var geolocation = new BMap.Geolocation();

geolocation.getCurrentPosition(function(r){

if(this.getStatus() == BMAP_STATUS_SUCCESS){

map.panTo(r.point);

//alert('您的位置：'+r.point.lng+','+r.point.lat);

var pt = r.point;

var geoc = new BMap.Geocoder();

geoc.getLocation(pt, function(rs){

var addComp = rs.addressComponents;

//alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);

$("#du-gps").text(addComp.district+addComp.street+addComp.streetNumber);

});

}

else {

alert('failed'+this.getStatus());

}

},{enableHighAccuracy: true})

/script

html5实现地图上定位导航路线

html5实现地图上定位导航路线方法如下：

1.先通过百度拾取坐标系统获得点位的坐标。

2.在网页的head中插入百度API引用脚本。

script type="text/javascript" src="

key=v=1.1services=true"/script

3.在网页的/body之后/html之前插入地图显示代码。

4.设置显示地图的div的id为“dituContent”，即添加 id="dituContent"

由于jqm的div的高度都是根据内容自由放大的，所以为了地图能正常显示，还需要

增加一个高度值，一般情况600px就可以，完成。

HTML5怎么使用JavaScript显示大数据地图板块

1、打开HTML5软件。

2、点击文件按钮。

3、选择文件使用驱动为JavaScript。

4、点击创建。

5、将大数据地图板块的代码输入。

6、点击运行即可显示。

设计制作一个百度地图的名片html5

制作名片简单的方法如下。

打开百度，点击上方【地图】。

点击地图下方【地图开放平台】。

点击【开发文档】。

选择【地图名片】。

点击【开始制作】。

按照提示第一步操作填写基本信息。

提示第二步操作，选择名片图片，生成名片链接。

HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式．被认为是互联网的核心技术之一。HTML产生于1990年，1997年HTML4成为互联网标准，并广泛应用于互联网应用的开发。

如何在html5的canvas绘制地图

我这里认为大家都稍微了解甚至熟悉canvas的一些API，就不具体说，每一个参数代表什么意思了。

!DOCTYPE html

html

head

meta charset='utf-8'

title图片加载平移放大缩小示例/title

style

html,body{

margin:0px;

padding:0px;

}

canvas{

border: 1px solid #000;

}

/style

/head

body

canvas id="canvas" width="800" height="800"/canvas

script type="text/javascript" src="main.js"/script

/body

/html

var canvas,context;

function int(){

canvas=document.getElementById('canvas');

context=canvas.getContext('2d');

}

图片加载

创建一个图片对象之后，图片不能马上绘制到canvas上面，因为图片还没有加载完成。所以我们需要监听图片对象加载完事件，然后再去绘制。

var img,//图片对象

imgIsLoaded//图片是否加载完成;

function loadImg(){

img=new Image();

img.onload=function(){

imgIsLoaded=true;

//draw image

}

img.src="map.jpg";

}

图片绘制

绘制图像一个函数就可以搞定，但是需要记录这个图像的左上角坐标以及缩放比例。

var imgX,imgY,imgScale;

function drawImage(){

context.clearRect(0,0,canvas.width,canvas.height);

context.drawImage(img,0,0,img.width,img.height,imgX,imgY,img.width*imgScale,img.height*imgScale);

}

图片平移

html5事件最小细度在DOM上，所以我们无法对canvas上的图像做监听，只能对canvas监听。

首先监听鼠标mousedown事件，等事件发生之后，再监听鼠标mousemove事件和mouseup事件

mousemove事件发生之后，获得鼠标移动的位移，相应的图片的位置改变多少

mouseup事件发生之后，取消对mousemove以及mouseup事件监听

canvas.onmousedown=function(event){

var pos=windowToCanvas(canvas,event.clientX,event.clientY);

canvas.onmousemove=function(event){

canvas.style.cursor="move";

var pos1=windowToCanvas(canvas,event.clientX,event.clientY);

var x=pos1.x-pos.x;

var y=pos1.y-pos.y;

pos=pos1;

imgX+=x;

imgY+=y;

drawImage();

}

canvas.onmouseup=function(){

canvas.onmousemove=null;

canvas.onmouseup=null;

canvas.style.cursor="default";

}

}

function windowToCanvas(canvas,x,y){

var bbox = canvas.getBoundingClientRect();

return {

x:x - bbox.left - (bbox.width - canvas.width) / 2,

y:y - bbox.top - (bbox.height - canvas.height) / 2

};

}

图片缩放

其实缩放很简单，稍微复杂的是，如何让鼠标成为放大或者缩小的中心。如果数学几何不好，计算公式就可能看不明白了。

canvas.onmousewheel=canvas.onwheel=function(event){//chrome firefox浏览器兼容

var pos=windowToCanvas(canvas,event.clientX,event.clientY);

event.wheelDelta=event.wheelDelta?event.wheelDelta:(event.deltaY*(-40));

if(event.wheelDelta0){

imgScale*=2;

imgX=imgX*2-pos.x;

imgY=imgY*2-pos.y;

}else{

imgScale/=2;

imgX=imgX*0.5+pos.x*0.5;

imgY=imgY*0.5+pos.y*0.5;

}

drawImage();

}

这个时候，基本功能就实现了，加载一张图片和加载多张图片都差不多，维护每一张图片的位置和大小，下面来整理一下代码吧。

var canvas,context;

var img,//图片对象

imgIsLoaded,//图片是否加载完成;

imgX=0,

imgY=0,

imgScale=1;

(function int(){

canvas=document.getElementById('canvas');

context=canvas.getContext('2d');

loadImg();

})();

function loadImg(){

img=new Image();

img.onload=function(){

imgIsLoaded=true;

drawImage();

}

img.src="map.jpg";

}

function drawImage(){

context.clearRect(0,0,canvas.width,canvas.height);

context.drawImage(img,0,0,img.width,img.height,imgX,imgY,img.width*imgScale,img.height*imgScale);

}

canvas.onmousedown=function(event){

var pos=windowToCanvas(canvas,event.clientX,event.clientY);

canvas.onmousemove=function(event){

canvas.style.cursor="move";

var pos1=windowToCanvas(canvas,event.clientX,event.clientY);

var x=pos1.x-pos.x;

var y=pos1.y-pos.y;

pos=pos1;

imgX+=x;

imgY+=y;

drawImage();

}

canvas.onmouseup=function(){

canvas.onmousemove=null;

canvas.onmouseup=null;

canvas.style.cursor="default";

}

}

canvas.onmousewheel=canvas.onwheel=function(event){

var pos=windowToCanvas(canvas,event.clientX,event.clientY);

event.wheelDelta=event.wheelDelta?event.wheelDelta:(event.deltaY*(-40));

if(event.wheelDelta0){

imgScale*=2;

imgX=imgX*2-pos.x;

imgY=imgY*2-pos.y;

}else{

imgScale/=2;

imgX=imgX*0.5+pos.x*0.5;

imgY=imgY*0.5+pos.y*0.5;

}

drawImage();

}

function windowToCanvas(canvas,x,y){

var bbox = canvas.getBoundingClientRect();

return {

x:x - bbox.left - (bbox.width - canvas.width) / 2,

y:y - bbox.top - (bbox.height - canvas.height) / 2

};

HTML5 Canvas元素绘制地图，如何实现显示鼠标所移动地方名称？

本文实例分享了html5 canvas可拖动省份的中国地图实现方法，供大家参考，具体内容如下

鼠标移动事件：根据点击的省份名，获得数据，并实时重绘移动层的省份

$('#eventCanvas').mousemove(function(ev){ 

 var mouseX, mouseY; 

 if(ev.layerX || ev.layerX==0){ 

  mouseX = ev.layerX; 

  mouseY = ev.layerY; 

 }else if(ev.offsetX || ev.offsetX==0){ 

  mouseX = ev.offsetX; 

  mouseY = ev.offsetY; 

 } 

 if(draging){ 

  if(opts.dragAll){ span style="font-family: Arial, Helvetica, sans-serif;"//拖动整个地图，存在问题，地图画的太慢/span 

   mapContext.clearRect(0, 0, 1100, 630); 

   for(var i = 0;i  allZoneData.length;i++){ 

    for(var j = 0;j  allData[allZoneData[i].name].length;j++){ //allData是第一次读取数据时放到内存里的变量，它包含了所有数据 

     pubFuns.drawMap(mapContext,allData[allZoneData[i].name][j],mouseX - tempX, mouseY - tempY); 

    } 

   } 

   }else{ 

    moveMapContext.clearRect(0, 0, 1100, 630); 

    pubFuns.drawMoveLayerLine(mouseX - tempX, mouseY - tempY); 

   }  

  } 

});

鼠标抬起事件：设置dragging为false，clear移动层。

$('#eventCanvas').mouseup(function(e){ 

 if(opts.dragAll){  

 }else{ 

  moveMapContext.clearRect(0, 0, 1100, 630); 

 } 

 draging = false; 

});

小结：功能、原理都很简单，但能熟悉canvas的一些属性和方法。canvas层是可以重叠到一起的，这样就可以在不同的层画不同的内容，方便维护和管理。

以上就是本文的全部内容，希望对大家的学习有所帮助。