一.需要文件

gapi3文件夾：存放接口等

tilemap文件夾：存放圖片

gapi.js文件

maptool.js文件

二.html配置

<script type="text/javascript" src="gapi.js"></script> <script type="text/javascript" src="maptool.js"></script>

• 1
• 2

三.使用

html中使用div 展示地圖

<div id="map_canvas" style="width=100%; height: 900px;"></div>

• 1

text/javascript中創(chuàng)建離線對(duì)象

////////////////////////////////CoordMapType對(duì)象定義:顯示目標(biāo)位置div///////////////////////////////////////////////////////////////// function CoordMapType(tileSize) {//創(chuàng)建對(duì)象方法(構(gòu)造函數(shù))this.tileSize = tileSize; }CoordMapType.prototype.getTile = function(coord, zoom, ownerDocument) {var div = ownerDocument.createElement('DIV');var ymax = 1 << zoom;var y = ymax - coord.y - 1; // div.innerHTML = coord.x + "," + y + "," + zoom;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 = '0px';div.style.borderColor = '#AAAAAA';return div; };////////////////////////////////LocalMapType對(duì)象定義:使用本地地圖實(shí)體類(lèi)型///////////////////////////////////////////////////////////////// function LocalMapType() {}LocalMapType.prototype.tileSize = new google.maps.Size(256, 256); LocalMapType.prototype.maxZoom = 18; LocalMapType.prototype.minZoom = 1; LocalMapType.prototype.name = "本地"; LocalMapType.prototype.alt = "顯示本地地圖"; LocalMapType.prototype.getTile = function(coord, zoom, ownerDocument) {var img = ownerDocument.createElement("img");img.style.width = this.tileSize.width + "px";img.style.height = this.tileSize.height + "px";var ymax = 1 << zoom;var y = ymax - coord.y - 1;var strURL = "tilemap\\sjztms\\" + zoom + "\\" + coord.x + "\\" + y + ".png";img.src = strURL; return img; };

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41

載入地圖（除了需要使用離線地圖對(duì)象外，API使用方法和在線地圖一樣）

var localMapType = new LocalMapType(); //創(chuàng)建一個(gè)簡(jiǎn)單的 Google 地圖 var myLatlng = new google.maps.LatLng(30.732137,103.968976);//谷歌經(jīng)緯度，使用WGS84坐標(biāo)系 var myOptions = {//myOptions:地圖設(shè)置center: myLatlng,zoom: 13 ,zoomControl :false,streetViewControl: false,disableDoubleClickZoom: true,//禁用雙擊放大mapTypeControl: false,//禁用左上角樣式 控件mapTypeControlOptions: {mapTypeIds: ["local", google.maps.MapTypeId.ROADMAP]} } 在map_canvas上創(chuàng)建地圖,地圖設(shè)置myOptionsvar map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);//Map() 的屬性:controls控件；mapTypes按字符串 ID 劃分的 MapType 實(shí)例的注冊(cè)表，overlayMapTypes 要疊加的額外地圖類(lèi)型map.mapTypes.set('local', localMapType);//注冊(cè)本地地圖實(shí)體類(lèi)型map.setMapTypeId('local');//使用本地地圖實(shí)體類(lèi)型map.overlayMapTypes.insertAt(0, new CoordMapType(new google.maps.Size(256, 256))); allmap=map; 創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的转：谷歌离线地图基础的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。