如何在html5的canvas繪制地圖

我這里認為大家都稍微了解甚至熟悉canvas的一些API，就不具體說，每一個參數(shù)代表什么意思了。

目前成都創(chuàng)新互聯(lián)公司已為千余家的企業(yè)提供了網(wǎng)站建設(shè)、域名、虛擬空間、成都網(wǎng)站托管、企業(yè)網(wǎng)站設(shè)計、耿馬網(wǎng)站維護等服務(wù)，公司將堅持客戶導向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

!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');

}

圖片加載

創(chuàng)建一個圖片對象之后，圖片不能馬上繪制到canvas上面，因為圖片還沒有加載完成。所以我們需要監(jiān)聽圖片對象加載完事件，然后再去繪制。

var img,//圖片對象

imgIsLoaded//圖片是否加載完成;

function loadImg(){

img=new Image();

img.onload=function(){

imgIsLoaded=true;

//draw image

}

img.src="map.jpg";

}

圖片繪制

繪制圖像一個函數(shù)就可以搞定，但是需要記錄這個圖像的左上角坐標以及縮放比例。

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上的圖像做監(jiān)聽，只能對canvas監(jiān)聽。

首先監(jiān)聽鼠標mousedown事件，等事件發(fā)生之后，再監(jiān)聽鼠標mousemove事件和mouseup事件

mousemove事件發(fā)生之后，獲得鼠標移動的位移，相應(yīng)的圖片的位置改變多少

mouseup事件發(fā)生之后，取消對mousemove以及mouseup事件監(jiān)聽

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

};

}

圖片縮放

其實縮放很簡單，稍微復(fù)雜的是，如何讓鼠標成為放大或者縮小的中心。如果數(shù)學幾何不好，計算公式就可能看不明白了。

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();

}

這個時候，基本功能就實現(xiàn)了，加載一張圖片和加載多張圖片都差不多，維護每一張圖片的位置和大小，下面來整理一下代碼吧。

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獲取接口方法中返回的map信息

定位功能（Geolocation）是HTML5的新特性，因此只有在支持HTML5的現(xiàn)代瀏覽器上運行，特別是手持設(shè)備如iphone，地理定位更加精確。首先我們要檢測用戶設(shè)備瀏覽器是否支持地理定位，如果支持則獲取地理信息。注意這個特性可能侵犯用戶的隱私，除非用戶同意，否則用戶位置信息是不可用的，所以我們在訪問該應(yīng)用時會提示是否允許地理定位，我們當然選擇允許即可。

function getLocation(){

if (navigator.geolocation){

navigator.geolocation.getCurrentPosition(showPosition,showError);

}else{

alert("瀏覽器不支持地理定位。");

}

}

上面的代碼可以知道，如果用戶設(shè)備支持地理定位，則運行 getCurrentPosition() 方法。如果getCurrentPosition()運行成功，則向參數(shù)showPosition中規(guī)定的函數(shù)返回一個coordinates對象，getCurrentPosition() 方法的第二個參數(shù)showError用于處理錯誤，它規(guī)定當獲取用戶位置失敗時運行的函數(shù)。

我們先來看函數(shù)showError()，它規(guī)定獲取用戶地理位置失敗時的一些錯誤代碼處理方式：

function showError(error){

switch(error.code) {

case error.PERMISSION_DENIED:

alert("定位失敗,用戶拒絕請求地理定位");

break;

case error.POSITION_UNAVAILABLE:

alert("定位失敗,位置信息是不可用");

break;

case error.TIMEOUT:

alert("定位失敗,請求獲取用戶位置超時");

break;

case error.UNKNOWN_ERROR:

alert("定位失敗,定位系統(tǒng)失效");

break;

}

}

我們再來看函數(shù)showPosition(),調(diào)用coords的latitude和longitude即可獲取到用戶的緯度和經(jīng)度。

function showPosition(position){

var lat = position.coords.latitude; //緯度

var lag = position.coords.longitude; //經(jīng)度

alert('緯度:'+lat+',經(jīng)度:'+lag);

}

利用百度地圖和谷歌地圖接口獲取用戶地址

上面我們了解了HTML5的Geolocation可以獲取用戶的經(jīng)緯度，那么我們要做的是需要把抽象的經(jīng)緯度轉(zhuǎn)成可讀的有意義的真正的用戶地理位置信息。幸運的是百度地圖和谷歌地圖等提供了這方面的接口，我們只需要將HTML5獲取到的經(jīng)緯度信息傳給地圖接口，則會返回用戶所在的地理位置，包括省市區(qū)信息，甚至有街道、門牌號等詳細的地理位置信息。

我們首先在頁面定義要展示地理位置的div，分別定義id#baidu_geo和id#google_geo。我們只需修改關(guān)鍵函數(shù)showPosition()。先來看百度地圖接口交互，我們將經(jīng)緯度信息通過Ajax方式發(fā)送給百度地圖接口，接口會返回相應(yīng)的省市區(qū)街道信息。百度地圖接口返回的是一串JSON數(shù)據(jù)，我們可以根據(jù)需求將需要的信息展示給div#baidu_geo。注意這里用到了jQuery庫，需要先加載jQuery庫文件。

HTML5中map標簽的使用 area標簽中的coords怎么可以做到自適應(yīng)

coords 中的值只能是數(shù)字，你的問題可以用 JavaScript 來解決

頁面加載的時候，用 JavaScript 獲取圖片的尺寸，例如 500 * 300，當圖片尺寸發(fā)生改變的時候再獲取一次，例如 400 * 240，獲取比例，400 / 500 = 0.8。然后使用 JavaScript 重新設(shè)定 coords

284 * 0.8

419 * 0.8

46 * 0.8

html5實現(xiàn)地圖上定位導航路線

html5實現(xiàn)地圖上定位導航路線方法如下：

1.先通過百度拾取坐標系統(tǒng)獲得點位的坐標。

2.在網(wǎng)頁的head中插入百度API引用腳本。

script type="text/javascript" src="

key=v=1.1services=true"/script

3.在網(wǎng)頁的/body之后/html之前插入地圖顯示代碼。

4.設(shè)置顯示地圖的div的id為“dituContent”，即添加 id="dituContent"

由于jqm的div的高度都是根據(jù)內(nèi)容自由放大的，所以為了地圖能正常顯示，還需要

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

在html5中usemap是什么意思

html

body

!--在一個大圖像上劃分成幾個熱點區(qū)域，每個熱點區(qū)域可以連接到不同網(wǎng)站--

img src="" width="950" height="570" border="0" usemap="#Map" / !-usemap在這里--

map name="Map" id="Map"

area shape="rect" coords="0,1,472,283" href="" target="_blank"/

area shape="rect" coords="472,2,952,283" href="" target="_blank"/

area shape="rect" coords="1,283,478,573" href="" target="_blank"/

area shape="rect" coords="472,283,952,683" href="" target="_blank"/

/body

/html

網(wǎng)站名稱：maphtml5,maple5
文章路徑：http://www.yijiale78.com/article22/dschccc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供移動網(wǎng)站建設(shè)、全網(wǎng)營銷推廣、品牌網(wǎng)站設(shè)計、定制開發(fā)、網(wǎng)站營銷、網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)