bigemap地图Google离线地图API概要解析

Google离线地图API概要解析

发布时间：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();