Google-map-api-基本功能使用及服務(wù)本地化的解決方案

GooglemapapiGooglemapapi基本功能使用及服務(wù)本地化的解決方案google提供的js庫文件google提供的地圖數(shù)據(jù)google提供的技術(shù)支持，例如查找路徑、周邊搜索

GoogleMapsAPI是Google為開發(fā)者提供的Maps編程API。它允許開發(fā)者在不必建立自己的地圖服務(wù)器的情況下，將GoogleMaps地圖數(shù)據(jù)嵌入到網(wǎng)站之中，從而實(shí)現(xiàn)嵌入GoogleMaps的地圖服務(wù)應(yīng)用，并借助GoogleMaps的地圖數(shù)據(jù)為用戶提供位置服務(wù)。Googlemapapi是javascript形式的接口，利用javascript，用戶可以像google地圖一樣在自己的地圖上添加覆蓋物，比如標(biāo)記、折線，或者響應(yīng)用戶的點(diǎn)擊動(dòng)作，并顯示包含內(nèi)容信息在內(nèi)的氣泡提示窗口?？梢詫oogle地圖服務(wù)分為3個(gè)部分來看待：123Contentsgoogle提供的js庫文件

<scripttype="text/javascript"src="/maps/api/js?sensor=false"></script>或者/maps/api/js?v=3.1&sensor=falseMapsAPI的JavaScript代碼通過請(qǐng)求

/maps/api/js

的引導(dǎo)程序網(wǎng)址進(jìn)行加載。該引導(dǎo)程序請(qǐng)求會(huì)加載所有的JavaScript主對(duì)象，以便在MapsAPI中使用。常用功能一：在頁面中加入GoogleMap服務(wù)html引導(dǎo)程序（.js）不同參數(shù)main.jsutil.jsonion.jsgoogle提供的js庫文件常用功能二：加載GoogleMap—構(gòu)造Map對(duì)象地圖類型（mapType）縮放級(jí)別（zoom）地圖容器（div）中心點(diǎn)（center）varmyOptions={

zoom:16,

center:newgoogle.maps.LatLng(39.9629,116.3581),

mapTypeId:google.maps.MapTypeId.ROADMAP

};Var

map=newgoogle.maps.Map(document.getElementByIdx_x("map_canvas"),myOptions);google提供的js庫文件常用功能二：加載GoogleMap—構(gòu)造Map對(duì)象google提供的js庫文件常見問題二：double-marginbug常用功能三：向地圖中添加標(biāo)記—構(gòu)造Marker對(duì)象標(biāo)記圖標(biāo)（icon）標(biāo)記位置（position）標(biāo)記標(biāo)題（title）所在地圖（map）

varmarker1=newgoogle.maps.Marker({

position:newgoogle.maps.LatLng(39.9629,116.3581),

map:map,

icon:”image.png”,

title:“marker"

});google提供的js庫文件常見問題二：double-marginbug常用功能三：向地圖中添加標(biāo)記—構(gòu)造Marker對(duì)象google提供的js庫文件常用功能四:添加信息窗口—構(gòu)造InfoInfoWindow對(duì)象所在地圖（map）所在位置（position）窗口內(nèi)容（content）varinfowindow=newgoogle.maps.InfoWindow({

content：‘HelloWorld’，

position：newgoogle.maps.LatLng(39.9629,116.3581)

});

infowindow.open(map);

infowindow.open(map，marker);在標(biāo)記點(diǎn)顯示google提供的js庫文件常用功能四:添加信息窗口—構(gòu)造InfoInfoWindow對(duì)象google提供的js庫文件常用功能五：事件綁定—調(diào)用addListener函數(shù)監(jiān)聽函數(shù)監(jiān)聽事件監(jiān)聽對(duì)象(1)監(jiān)聽地圖的縮放：google.maps.event.addListener(map,'zoom_changed',function(){

//縮放級(jí)別變化后要執(zhí)行的函數(shù)；

});(2)標(biāo)記的點(diǎn)擊：google.maps.event.addListener(marker,'click',function(event){

//點(diǎn)擊事件后要執(zhí)行的函數(shù)；

infowindow.open(map，marker);

});(3)監(jiān)聽dom事件:google.maps.event.addDomListener(window,'load',initialize);google地圖數(shù)據(jù)

地理坐標(biāo)geographiccoordiate

通過構(gòu)造一個(gè)坐標(biāo)對(duì)象可以確定地球上唯一一個(gè)點(diǎn)newgoogle.maps.LatLng(39.9629,116.3581);google地圖數(shù)據(jù)

世界坐標(biāo)worldcoordinate縮放級(jí)別為0像素為256*256的png圖像世界坐標(biāo)空間為

{0-256},{0-256}每個(gè)地理坐標(biāo)點(diǎn)對(duì)應(yīng)唯一一個(gè)世界坐標(biāo)Zoomlevel=1512*512google地圖數(shù)據(jù)

像素坐標(biāo)pixelcoordinate

pixelCoordinate=worldCoordinate*2zoomLevelZoomlevel=21024*1024Zoomlevel=0256*256google地圖數(shù)據(jù)

圖塊坐標(biāo)pixelcoordinate

Zoomlevel=0256*256Zoomlevel=21024*1024pixelCoordinate=worldCoordinate*2zoomLevelZoomlevel=1512*5120,01,11,00,11,00,03,12,11,31,11,20,30,20,13,23,32,32,23,02,0tileCoordinate=pixelCoordinate/256取整

關(guān)于JavaScript的兼容

坐標(biāo)轉(zhuǎn)換

0,01,11,00,1地理坐標(biāo)世界坐標(biāo)像素坐標(biāo)圖塊坐標(biāo)google地圖數(shù)據(jù)地圖類型（mapType）縮放級(jí)別（zoom）地圖容器（div）中心點(diǎn)（center）1,00,03,12,11,31,11,20,30,20,13,23,32,32,23,02,0通過在線google地圖的移動(dòng)，可以看出googlemap會(huì)去類似這樣的地址/vt?src=apiv3&x=2&y=2&z=2/vt?src=apiv3&x=3&y=2&z=2/vt?src=apiv3&x=2&y=3&z=2/vt?src=apiv3&x=3&y=3&z=2存在的問題

onlineoffline●不能連接外網(wǎng)

●地圖不滿足需求●

放大到一定級(jí)別沒有想要的瓦片

A

Q

●googlemap服務(wù)本地化

●添加地圖疊加層服務(wù)本地化將與服務(wù)器交互的js文件本地化把googlemap加載時(shí)候，所需要的js下載到本地，以后再應(yīng)用程序開發(fā)的時(shí)候，不引用google站點(diǎn)上的js，而是換成本地的js文件。具體有些什么js需要下載的，這里就不做詳細(xì)介紹了，可以通過firefox的firebug插件，或是googlechrome等工具查看到http請(qǐng)求，分析并下載有效的js文件，可能還需要分析各個(gè)js之間在使用過程中加載外鏈js的地址，并予以修改、替換問對(duì)本地js的調(diào)用。服務(wù)本地化加載本地的地圖數(shù)據(jù)<<interface>>MapTypegetTile()CoordMapTypetitleSizemaxZoomgetTile()CoordMapTtotype.getTile=function(coord,zoom,ownerDocument){

vardiv=ownerDocument.createElement('div');

div.innerHTML

='<imgsrc="./tiles/'+zoom+'/'+coord.x+'/'+coord.y+'.png"/>';

div.style.width=this.tileSize.width+'px';

div.style.height=this.tileSize.height+'px';

div.style.fontSize='10';

div.style.borderStyle='solid';

div.style.borderWidth='1px';

div.style.borderColor='#AAAAAA';

returndiv;

};服務(wù)本地化加載本地的地圖數(shù)據(jù)/vt?src=apiv3&x=2&y=2&z=2x=812,y=420,z=10function(coord,zoom,ownerDocument){vardiv=ownerDocument.createElement('div');div.innerHTML

='<imgsrc="./tiles/'+zoom+'/'+coord.x+'/'+coord.y+'.png"/>';服務(wù)本地化加載GoogleMap——作為基礎(chǔ)圖層地圖類型（mapType）縮放級(jí)別（zoom）地圖容器（div）中心點(diǎn)（center）varmyOptions={

zoom:16,

center:newgoogle.maps.LatLng(39.9629,116.3581),

//mapTypeId:google.maps.MapTypeId.ROADMAP

mapTypeId:"coordinate"};Var

map=newgoogle.maps.Map(document.getElementByIdx_x("map_canvas"),myOptions);varcoordinateMapType=newCoordMapType();map.mapTypes.set('coordinate',coordinateMapType);與服務(wù)器交互的js文件加載GoogleMap——作為疊加圖層地圖類型（mapType）縮放級(jí)別（zoom）地圖容器（div）中心點(diǎn)（center）varmyOptions={

zoom:16,