谷歌離線API詳細解析

1、.谷歌離線api 詳細解析1. 說明離線地圖發(fā)布有多種方式均可以實現(xiàn)，可以利用 arcgis server 、geoserver等構建地圖 web 效勞器，還可以使用谷歌地圖、百度地圖等 api 進展地圖發(fā)布效勞。本篇主要簡單介紹如何調用google 離線地圖api 實現(xiàn)地圖標注、獲取坐標、及其他參數(shù)的設置。2. 實現(xiàn)google 地圖規(guī)定了地圖瓦片在存放的目錄命名方式和層級關系。通過請求地圖的層級放大級別、坐標值對應的瓦片，效勞器向客戶端返回結果實現(xiàn)。第一步：引入谷歌地圖核心js 文件后，使用原型和構造函數(shù)的方法創(chuàng)立一個根底的地圖對象,分別定義了瓦片的大小，允許最大縮放層級，允許最小縮放層級

2、，名稱以及引入瓦片地圖。如下：1. 2. 3. 4.5.6.google api離線地圖 7.8.9. 10.html height: 100%; 11.body height: 100%; margin: 0; padding: 0; 12.#map_canvas height: 100%; 13. 14. 15. 16. 17. 18. 19. 20.function demo() 21. dtotype.tilesize = new google.maps.size(256, 256);/瓦片大小22. dtotype.maxzoom = 19;/允許最大縮放

3、層級23. dtotype.minzoom = 5;/允許最小縮放層級24. d = 地圖 ;25.dtotype.gettile = function (coord, zoom, ownerdocument) .26.var img = ownerdocument.createelement(img); 27.img.style.width = this.tilesize.width + px; 28.img.style.height = this.tilesize.height + px; 29./ 定義瓦片的相對路徑30.v

4、ar strurl = 電子地圖瓦片目錄/;31./ 其中 zoom 為層級，x 可以理解為該瓦片在整個地圖中的列數(shù)，y 為行數(shù)，圖片格式下載的時候選擇 png 或者 jpg ，我這里是png 格式32.strurl += zoom + / + coord.x + / + coord.y + .png; 33.img.src = strurl; 34.return img; 35.; 36.var localmap = new demo(); 37.var satel =new demo(); 38. = 衛(wèi)星影像 ; 39.satel.gettile = function

5、 (coord, zoom, ownerdocument) 40.var img = ownerdocument.createelement(img); 41.img.style.width = this.tilesize.width + px; 42.img.style.height = this.tilesize.height + px; 43.var strurl = 衛(wèi)星影像瓦片目錄/;44.strurl += zoom + / + coord.x + / + coord.y + .png; 45.img.src = strurl; 46.return img; 47.; 48.var

6、 myoptions = 49.center: new google.maps.latlng(23.56,104.252), /地圖中心坐標50.zoom: 4, /地圖層級51.maptypecontrol: true, /默認右上角顯示地圖名稱52.maptypecontroloptions: 53.maptypeids: satel, localmap 54. 55.; 56. /創(chuàng)立一個map 對象，以下代碼使用參數(shù)(myoptions) 在元素 (id為 map_canvas)創(chuàng)建了一個新的地圖，并默認在地圖右上角顯示衛(wèi)星影像和電子地圖切換57.var map = new googl

7、e.maps.map(document.getelementbyid(map_canvas), myopti ons);58.map.maptypes.set(localmap, localmap); 59.map.maptypes.set(satel, satel); 60.map.setmaptypeid(localmap); /設置默認顯示的地圖為衛(wèi)星影像61. 自此，已經成功創(chuàng)立離線地圖，只需下載相應的地圖瓦片放在指定目錄中即可瀏覽，并可隨意切換地圖，按照上述方法還可新增地圖源。下面簡述如何調用api 添加標注、獲取坐標等。添加標注.varmarker= new google.maps

8、.marker(position: new google.maps.latlng(27.56,104.252),/設置標注所在經緯度坐標此為必須icon:icon.png,/draggable: true,/title:hello world!/自定義標注圖標，不寫就默認使用標注是否支持鼠標拖拽標注的名稱google默認圖標);marker.setmap(map);/將定義的標注顯示在地圖上注意：以上 marker.setmap(map) 可以不需要，直接在 marker 變量中新增map ：map 即可，在下面添加多邊線、線、圓也如此。獲取地圖中心坐標map.getcenter();獲取地圖

9、層級map.getzoom();例如鼠標滾動獲取地圖層級：1.google.maps.event.addlistener(map,zoom_changed,function (event) 2.document.getelementbyid(showzoom).innerhtml =map.getzoom();3.); 鼠標移動獲取經緯度坐標google.maps.event.addlistener(map,mousemove,function (event)document.getelementbyid(showlatlng) .innerhtml =event .latlng.lng()+

10、,+ event.latlng.lat(););繪制折線/ 定義一個點坐標數(shù)組變量，將所有點從頭到尾連成一條線varflightplancoordinates= new google.maps.latlng(37.772323, -122.214897),new google.maps.latlng(21.291982, -157.821856),new google.maps.latlng(-18.142599, 178.431),new google.maps.latlng(-27.46758, 153.027892);varflightpath=new google.maps.polyl

11、ine(path: flightplancoordinates,/相應點坐標strokecolor: #ff0000,/定義線條顏色strokeopacity: 1.0, /線條透明的取值 01.0strokeweight: 2 / 線條粗細，單位為px);flightpath.setmap(map);/將線條顯示在地圖上之間，由完全透明到不透明.繪制多邊形1.var coords = 2.new google.maps.latlng(25.774252, 100.190262), 3.new google.maps.latlng(18.466465, 106.118292), 4.new g

12、oogle.maps.latlng(32.321384, 104.75737), 5.new google.maps.latlng(25.774252, 100.190262) 6.; 7.polygon = new google.maps.polygon( 8.paths: coords, 9.strokecolor: #ff0000, /邊線顏色10.strokeopacity: 0.8, /邊線透明度11.strokeweight: 2, /邊線粗細12.fillcolor: #ff0000, /填充顏色13.fillopacity: 0.35 /填充透明度14.);15.polygon

13、.setmap(map); /將多邊形顯示在地圖上繪制圓形、矩形和上述方法類似，不再重復，下面介紹信息窗口（infowindow 。infowindow 在地圖上方的浮動窗口中顯示內容，通過點擊地圖上的marker ，看到活動的信息窗口。infowindow 構造函數(shù)采用的是infowindow options對象，該對象指定了用于顯示信息窗口的一組初始參數(shù)。在創(chuàng)立信息窗口的過程中，系統(tǒng)不會在地圖上添加信息窗口。要顯示信息窗口，您需要調用 infowindow 上的 open() 方法，向其傳遞要在其中翻開信息窗口的 map ，以及向其傳遞用于錨定信息窗口的 marker 可選。如果未提供任何

14、標記，那么，會在其 position 屬性上翻開信息窗口。infowindow options 對象是包含以下字段的對象常量： content 包含了信息窗口翻開時，系統(tǒng)要在其中顯示的文本字符串或dom 節(jié)點。 pixeloffset 包含了從信息窗口的頂部到信息窗口錨定位置的偏移量。實際上，您不應也無需修改此字段。 position 包含了此信息窗口錨定位置的latlng 。請注意，在標記上執(zhí)行翻開信息窗口操作時，系統(tǒng)會自動使用一個新位置更新該值。 maxwidth指定了信息窗口的最大寬度以像素為單位。infowindow 的內容可以是文本字符串、 html 代碼段或 dom 元素本身。要設

15、置此內容，請在 infowindow options 構造函數(shù)中傳遞該內容，或者對 infowindow 顯式調用 setcontent() 。如果想要顯式調整內容的大小，您可以使.用 進展此操作，如果您愿意，還可以啟用滾動功能。請注意，如果您沒有啟用滾動功能，而內容的大小又超過了信息窗口的可用空間，那么，內容可能會從信息窗口中“溢 出。infowindow 可附加到 marker 對象在這種情況下，它們的位置取決于標記的位置上，或附加到地圖本身指定的 latlng 位置上。如果您一次只想顯示一個信息窗口正如 google maps 上的相應行為，那么，您只需創(chuàng)立一個信息窗口，然后在地圖事件例

16、如用戶點擊執(zhí)行過程中將此信息窗口重新分配到不同的位置或標記中。但與 google maps api 第 2 版中的相應行為不同的是，如果您選擇進展上述操作，那么，地圖可能會立即顯示多個infowindow對象。要更改信息窗口的位置，您可以對信息窗口調用setposition() 以顯式的方式更改其位置，或者使用 infowindow.open() 方法將信息窗口附加到新標記上。請注意，如果您在沒有傳遞標記的情況下調用了 open() ，那么， infowindow 將會使用在構建過程中通過 infowindow options 對象指定的位置，代碼如下：1./ 定義顯示內容，可以使用 html

17、 標簽顯示內容效果2.var contentstring= +3.+4. + 5.xx解放碑 +6.+7. 解放碑中央商務區(qū)主要以效勞業(yè)為主，而且主要是占地小、高增值的現(xiàn)代效勞業(yè)。 2006 年，解放碑 cbd 有各類樓宇635 幢，其中具有商貿功能的421 幢，具有商務功能的192 幢，隨著世界商貿中心、萬豪國際金融中心、世界貿易中心等現(xiàn)代商務樓盤的相繼落成+8. + 9. 官方地址：+10.:/ + 12. ; 13. var infowindow= new google.maps.infowindow(14.content: contentstring, /顯示內容15.maxwidth:400 /定義最大寬度16.); 17.var marker = new google.maps.marker( 18.position: new google.maps.latlng(27.56,104.252), 19.map: map, 20.title:xx解放碑 21.);