html5实现地图上定位导航路线方法如下：
1先通过百度拾取坐标系统获得点位的坐标。
>
2在网页的<head>中插入百度API引用脚本。
<script type="text/javascript" src=">
key=&v=11&services=true"></script>
3在网页的</body>之后</html>之前插入地图显示代码。
4设置显示地图的div的id为“dituContent”，即添加 id="dituContent"
由于jqm的div的高度都是根据内容自由放大的，所以为了地图能正常显示，还需要
增加一个高度值，一般情况600px就可以，完成。
我这里认为大家都稍微了解甚至熟悉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="mainjs"></script>
</body>
</html>
var canvas,context;
function int(){
canvas=documentgetElementById('canvas');
context=canvasgetContext('2d');
}
加载
创建一个对象之后，不能马上绘制到canvas上面，因为还没有加载完成。所以我们需要监听对象加载完事件，然后再去绘制。
var img,//对象
imgIsLoaded//是否加载完成;
function loadImg(){
img=new Image();
imgonload=function(){
imgIsLoaded=true;
//draw image
}
imgsrc="mapjpg";
}
绘制
绘制图像一个函数就可以搞定，但是需要记录这个图像的左上角坐标以及缩放比例。
var imgX,imgY,imgScale;
function drawImage(){
contextclearRect(0,0,canvaswidth,canvasheight);
contextdrawImage(img,0,0,imgwidth,imgheight,imgX,imgY,imgwidthimgScale,imgheightimgScale);
}
平移
html5事件最小细度在DOM上，所以我们无法对canvas上的图像做监听，只能对canvas监听。
首先监听鼠标mousedown事件，等事件发生之后，再监听鼠标mousemove事件和mouseup事件
mousemove事件发生之后，获得鼠标移动的位移，相应的的位置改变多少
mouseup事件发生之后，取消对mousemove以及mouseup事件监听
canvasonmousedown=function(event){
var pos=windowToCanvas(canvas,eventclientX,eventclientY);
canvasonmousemove=function(event){
canvasstylecursor="move";
var pos1=windowToCanvas(canvas,eventclientX,eventclientY);
var x=pos1x-posx;
var y=pos1y-posy;
pos=pos1;
imgX+=x;
imgY+=y;
drawImage();
}
canvasonmouseup=function(){
canvasonmousemove=null;
canvasonmouseup=null;
canvasstylecursor="default";
}
}
function windowToCanvas(canvas,x,y){
var bbox = canvasgetBoundingClientRect();
return {
x:x - bboxleft - (bboxwidth - canvaswidth) / 2,
y:y - bboxtop - (bboxheight - canvasheight) / 2
};
}
缩放
其实缩放很简单，稍微复杂的是，如何让鼠标成为放大或者缩小的中心。如果数学几何不好，计算公式就可能看不明白了。
canvasonmousewheel=canvasonwheel=function(event){//chrome firefox浏览器兼容
var pos=windowToCanvas(canvas,eventclientX,eventclientY);
eventwheelDelta=eventwheelDeltaeventwheelDelta:(eventdeltaY(-40));
if(eventwheelDelta>0){
imgScale=2;
imgX=imgX2-posx;
imgY=imgY2-posy;
}else{
imgScale/=2;
imgX=imgX05+posx05;
imgY=imgY05+posy05;
}
drawImage();
}
这个时候，基本功能就实现了，加载一张和加载多张都差不多，维护每一张的位置和大小，下面来整理一下代码吧。
var canvas,context;
var img,//对象
imgIsLoaded,//是否加载完成;
imgX=0,
imgY=0,
imgScale=1;
(function int(){
canvas=documentgetElementById('canvas');
context=canvasgetContext('2d');
loadImg();
})();
function loadImg(){
img=new Image();
imgonload=function(){
imgIsLoaded=true;
drawImage();
}
imgsrc="mapjpg";
}
function drawImage(){
contextclearRect(0,0,canvaswidth,canvasheight);
contextdrawImage(img,0,0,imgwidth,imgheight,imgX,imgY,imgwidthimgScale,imgheightimgScale);
}
canvasonmousedown=function(event){
var pos=windowToCanvas(canvas,eventclientX,eventclientY);
canvasonmousemove=function(event){
canvasstylecursor="move";
var pos1=windowToCanvas(canvas,eventclientX,eventclientY);
var x=pos1x-posx;
var y=pos1y-posy;
pos=pos1;
imgX+=x;
imgY+=y;
drawImage();
}
canvasonmouseup=function(){
canvasonmousemove=null;
canvasonmouseup=null;
canvasstylecursor="default";
}
}
canvasonmousewheel=canvasonwheel=function(event){
var pos=windowToCanvas(canvas,eventclientX,eventclientY);
eventwheelDelta=eventwheelDeltaeventwheelDelta:(eventdeltaY(-40));
if(eventwheelDelta>0){
imgScale=2;
imgX=imgX2-posx;
imgY=imgY2-posy;
}else{
imgScale/=2;
imgX=imgX05+posx05;
imgY=imgY05+posy05;
}
drawImage();
}
function windowToCanvas(canvas,x,y){
var bbox = canvasgetBoundingClientRect();
return {
x:x - bboxleft - (bboxwidth - canvaswidth) / 2,
y:y - bboxtop - (bboxheight - canvasheight) / 2
};
将高德地图用到html中步骤：
1、页面引入API：
1<script type="text/javascript" src=">
2、html：
1<div id="container" style="width:500px; height:300px"></div>
3、JS代码：
1234var map = new AMapMap('container',{ zoom: 10, center: [11639,399]});
HTML5怎么用高德地图API返回当前位置的经纬度：
1、当手机采集的地理位置（经纬度）发生改变时在界面上显示出改变后的经纬度。
2、如果开发过android原生定位程序的开发者应该对这部分代码不陌生，中规中矩，先注册位置监听服务，然后当位置发生改变后出发onLocationChanged()方法。
3、现在请在官网上下载示例代码，导入工程后开启包comamapcnapislocation中的MyLocationjava文件，该文件实现的主要功能是：初始化地图并且实现首次定位，地图会自动移动到定位点，我们一会便要基于这个文件来完成地图自动实时定位的功能。
可以实现的，HTML5可以使用手机的GPS信息，利用百度等地图的开放API就可以了。
HTML5中可以通过IP，WIFI信息，GPS，来实现地理定位，当然相关精度也是有所不同，所以如果要精确导航就得使用GPS信息。
下面是一段HTML5结合百度地图API来获取位置的代码：
<div id="allmap"></div>当前定位地址：<a id="du-gps"></a><span></span></div>
<script>
var map = new BMapMap("allmap");
var geolocation = new BMapGeolocation();
geolocationgetCurrentPosition(function(r){
if(thisgetStatus() == BMAP_STATUS_SUCCESS){
mappanTo(rpoint);
//alert('您的位置：'+rpointlng+','+rpointlat);
var pt = rpoint;
var geoc = new BMapGeocoder();
geocgetLocation(pt, function(rs){
var addComp = rsaddressComponents;
//alert(addCompprovince + ", " + addCompcity + ", " + addCompdistrict + ", " + addCompstreet + ", " + addCompstreetNumber);
$("#du-gps")text(addCompdistrict+addCompstreet+addCompstreetNumber);
});
}
else {
alert('failed'+thisgetStatus());
}
},{enableHighAccuracy: true})
</script>
以上就是关于html5实现地图上定位导航路线全部的内容，包括:html5实现地图上定位导航路线、如何在html5的canvas绘制地图、如何将高德地图直接用到html中等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）