Google离线地图API概要解析

Google离线地图API概要解析

发布时间：2018-01-17 版权：

 

1.说明

离线地图发布有多种方式均可以实现，可以利用ArcGis Server、GeoServer等构建地图Web服务器，还可以使用 谷歌地图、百度地图等API进行地图发布服务。本篇主要简单介绍如何调用Google离线地图API实现地图标注、获取坐标、及其他参数的设置。【如何发布Google离线地图】

2.实现

Google地图规定了地图瓦片在存放的目录命名方式和层级关系。通过Http请求地图的层级（放大级别） 、坐标值对应的瓦片，服务器向客户端返回结果实现。

第一步：引入谷歌地图核心JS文件后，使用原型和构造函数的方法创建一个基础的地图对象 ,分别定义了瓦片的大小，允许最大缩放层级，允许最小缩放层级，名称以及引入瓦片地图。如下：

<span style="color:#333333"><span style="color:#333333"> 
 
 
 
 
 
 
 
 
 
   </span></span>

       function BigeMap() { }  BigeMap.prototype.tileSize = new google.maps.Size(256, 256);//瓦片大小  BigeMap.prototype.maxZoom = 19;//允许最大缩放层级  BigeMap.prototype.minZoom = 5;//允许最小缩放层级  BigeMap.prototype.name = "地图";  BigeMap.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 strURL = '电子地图瓦片目录/';    //其中zoom为层级，x可以理解为该瓦片在整个地图中的列数，y为行数，图片格式下载的时候选择png或者jpg，我这里是png格式    strURL += zoom + "/" + coord.x + "/" + coord.y + '.png';    img.src = strURL;    return img;  };  var localMap = new BigeMap();  var satel=new BigeMap();  satel.name='卫星影像';  satel.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 strURL = '卫星影像瓦片目录/';    strURL += zoom + "/" + coord.x + "/" + coord.y + '.png';    img.src = strURL;    return img;  };  var myOptions = {    center: new google.maps.LatLng(23.56,104.252), //地图中心坐标    zoom: 4,    //地图层级    mapTypeControl: true,  //默认右上角显示地图名称    mapTypeControlOptions: {    mapTypeIds: ['satel', 'localMap']   }  };  //创建一个map对象，以下代码使用参数(myOptions)在

 元素 (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'); //设置默认显示的地图为卫星影像

自此，已经成功创建离线地图，只需下载相应的地图瓦片放在指定目录中即可浏览，并可随意切换地图，按照上述方法还可新增地图源。下面简述如何调用API添加标注、获取坐标等。

• 添加标注

var marker = new google.maps.Marker({

  position: