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层是可以重叠到一起的,这样就可以在不同的层画不同的内容,方便维护和管理。

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


网站标题:html5地图,html5地图导航
文章链接:http://pwwzsj.com/article/dscdjih.html