1.說明

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

2.實現

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

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

<span style="color:#000000">     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文件，