釋出時間：2018-01-17 版權：

1.說明

離線地圖釋出有多種方式均可以實現，可以利用ArcGis Server、GeoServer等構建地圖Web伺服器，還可以使用 谷歌地圖、百度地圖等API進行地圖釋出服務。本篇主要簡單介紹如何呼叫Google離線地圖API實現地圖標註、獲取座標、及其他引數的設定。【如何釋出Google離線地圖】

2.實現

Google地圖規定了地圖瓦片在存放的目錄命名方式和層級關係。通過Http請求地圖的層級（放大級別） 、座標值對應的瓦片，伺服器向客戶端返回結果實現。

第一步：引入谷歌地圖核心JS檔案後，使用原型和建構函式的方法建立一個基礎的地圖物件 ,分別定義了瓦片的大小，允許最大縮放層級，允許最小縮放層級，名稱以及引入瓦片地圖。如下：

<span style="color:#333333">     Google API離線地圖            元素 (id為map_canvas) 建立了一個新的地圖，並預設在地圖右上角顯示 衛星影像和電子地圖切換
 var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
 map.mapTypes.set('localMap', localMap);
 map.mapTypes.set('satel', satel);
 map.setMapTypeId('localMap'); //設定預設顯示的地圖為衛星影像" _ue_custom_node_="true"></span>
 

自此，已經成功建立離線地圖，只需下載相應的地圖瓦片放在指定目錄中即可瀏覽，並可隨意切換地圖，按照上述方法還可新增地圖源。下面簡述如何呼叫API新增標註、獲取座標等。

• 新增標註

var marker = new google.maps.Marker({

  position: new google.maps.LatLng(27.56,104.252),//設定標註所在經緯度座標（此為必須）

  icon:'icon.png',//自定義標註圖示，不寫就預設使用Google預設圖示

  draggable: true,//標註是否支援滑鼠拖拽

title:"Hello World!"//標註的名稱

});  marker.setMap(map);//將定義的標註顯示在地圖上

注意：以上 marker.setMap(map)可以不需要，直接在marker變數中新增map：map即可，在下面新增多邊線、線、圓也如此。

• 獲取地圖中心座標

  map.getCenter();

• 獲取地圖層級

  map.getZoom();

    例如滑鼠滾動獲取地圖層級：

         google.maps.event.addListener(map,'zoom_changed',function (event)

    {     document.getElementById("showZoom").innerHTML = map.getZoom();     });

•       滑鼠移動獲取經緯度座標

    google.maps.event.addListener(map,'mousemove',function (event){

     document.getElementById("showLatlng").innerHTML=

  event.latLng.lng()+','+event.latLng.lat();   });

•  繪製折線

//定義一個點座標陣列變數，將所有點從頭到尾連成一條線   var flightPlanCoordinates = [     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)   ];   var flightPath = new google.maps.Polyline({     path: flightPlanCoordinates,//相應點座標     strokeColor: "#FF0000",//定義線條顏色     strokeOpacity: 1.0, //線條透明的 取值0~1.0之間，由完全透明到不透明     strokeWeight: 2 //線條粗細，單位為px   });   flightPath.setMap(map);//將線條顯示在地圖上

•  繪製多邊形

var coords = [   new google.maps.LatLng(25.774252, 100.190262),   new google.maps.LatLng(18.466465, 106.118292),   new google.maps.LatLng(32.321384, 104.75737),   new google.maps.LatLng(25.774252, 100.190262) ]; polygon = new google.maps.Polygon({   paths: coords,   strokeColor: "#FF0000", //邊線顏色   strokeOpacity: 0.8, //邊線透明度   strokeWeight: 2,  //邊線粗細   fillColor: "#FF0000", //填充顏色   fillOpacity: 0.35 //填充透明度 }); polygon.setMap(map); //將多邊形顯示在地圖上

•  繪製圓形、矩形和上述方法類似， 不再重複，下面介紹資訊視窗（InfoWindow）。

InfoWindow 在地圖上方的浮動視窗中顯示內容， 通過點選地圖上的Marker，看到活動的資訊視窗。

InfoWindow 建構函式採用的是 InfoWindow options 物件，該物件指定了用於顯示資訊視窗的一組初始引數。在建立資訊視窗的過程中，系統不會在地圖上新增資訊視窗。要顯示資訊視窗，您需要呼叫 InfoWindow 上的 open() 方法，向其傳遞要在其中開啟資訊視窗的 Map，以及向其傳遞用於錨定資訊視窗的 Marker（可選）。（如果未提供任何標記，那麼，會在其 position 屬性上開啟資訊視窗）。

InfoWindow options 物件是包含以下欄位的物件常量：

 ★ content 包含了資訊視窗開啟時，系統要在其中顯示的文字字串或 DOM 節點。

 ★ pixelOffset 包含了從資訊視窗的頂部到資訊視窗錨定位置的偏移量。實際上，您不應也無需修改此欄位。

 ★ position 包含了此資訊視窗錨定位置的 LatLng。請注意，在標記上執行開啟資訊視窗操作時，系統會自動使用一個新位置更新該值。

 ★ maxWidth 指定了資訊視窗的最大寬度（以畫素為單位）。

InfoWindow 的內容可以是文字字串、HTML 程式碼段或 DOM 元素本身。要設定此內容，請在 InfoWindow options 建構函式中傳遞該內容，或者對InfoWindow顯式呼叫 setContent()。如果想要顯式調整內容的大小，您可以使用

進行此操作，如果您願意，還可以啟用滾動功能。請注意，如果您沒有啟用滾動功能，而內容的大小又超過了資訊視窗的可用空間，那麼，內容可能會從資訊視窗中“溢”出。

InfoWindow 可附加到 Marker 物件（在這種情況下，它們的位置取決於標記的位置）上，或附加到地圖本身指定的 LatLng 位置上。如果您一次只想顯示一個資訊視窗（正如 Google Maps 上的相應行為），那麼，您只需建立一個資訊視窗，然後在地圖事件（例如使用者點選）執行過程中將此資訊視窗重新分配到不同的位置或標記中。但與 Google Maps API 第 2 版中的相應行為不同的是，如果您選擇進行上述操作，那麼，地圖可能會立即顯示多個 InfoWindow 物件。

要更改資訊視窗的位置，您可以對資訊視窗呼叫 setPosition() 以顯式的方式更改其位置，或者使用 InfoWindow.open() 方法將資訊視窗附加到新標記上。請注意，如果您在沒有傳遞標記的情況下呼叫了 open()，那麼，InfoWindow 將會使用在構建過程中通過 InfoWindow options 物件指定的位置，程式碼如下：

// 定義顯示內容，可以使用html標籤顯示內容效果var contentString = '

'

+     '

'

+     ''+     '

Bigemap

地圖下載器'+     '

'

+     '

2016

高清衛星影像資料下載(自動拼接，含經緯度和投影資訊)、高程等高線下載(支援AutoCAD向量)、三維地圖、影像精度0.25、無偏移套合、支援【投影轉換】轉西安80\北京54\CGCS2000、線上標註、標準分幅、KML、Arcgis、Mapinfo、Global Maper、MapGIS（提供GIS地理資訊處理\發布諮詢）'+     '

'+     '

官方地址： '+     'http://www.bigemap.com'+     ''+     '';var infowindow = new google.maps.InfoWindow({     content: contentString, //顯示內容     maxWidth:400 //定義最大寬度 });var marker = new google.maps.Marker({     position: new google.maps.LatLng(27.56,104.252),     map: map,     title:"Bigemap" });//點選Maker標註顯示InfoWindow google.maps.event.addListener(marker, 'click', function() {   infowindow.open(map,marker); });

效果如下圖：

以上就是Google離線地圖API簡單功能開發示例的詳細解析，更多相關可參考Google地圖官方API文件，推薦API之家的 【google地圖參考手冊】