[Google离线地图示例解析]

1.说明

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

2.实现

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

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

<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/><meta http-equiv="content-type" content="text/html; charset=UTF-8" /><title>Google API离线地图</title><script type="text/javascript" src="mapapi.js"></script><script type="text/javascript" src="maplabel-compiled.js"></script><style>html { height: 100%; }body { height: 100%; margin: 0; padding: 0; }#map_canvas { height: 100%; }</style></head><body><div id="map_canvas"></div></body></html><script type="text/javascript">function Demo() { }Demo.prototype.tileSize = new google.maps.Size(256, 256);//瓦片大小Demo.prototype.maxZoom = 19;//允许最大缩放层级Demo.prototype.minZoom = 5;//允许最小缩放层级Demo.prototype.name = "地图";Demo.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 Demo();var satel=new Demo();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)在<div> 元素 (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'); //设置默认显示的地图为卫星影像
</script>

自此，已经成功创建离线地图，只需下载相应的地图瓦片放在指定目录中即可浏览，并可随意切换地图，按照上述方法还可新增地图源。下面简述如何调用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()。如果想要显式调整内容的大小，您可以使用 <div> 进行此操作，如果您愿意，还可以启用滚动功能。请注意，如果您没有启用滚动功能，而内容的大小又超过了信息窗口的可用空间，那么，内容可能会从信息窗口中“溢”出。

InfoWindow 可附加到 Marker 对象（在这种情况下，它们的位置取决于标记的位置）上，或附加到地图本身指定的 LatLng 位置上。如果您一次只想显示一个信息窗口（正如 Google Maps 上的相应行为），那么，您只需创建一个信息窗口，然后在地图事件（例如用户点击）执行过程中将此信息窗口重新分配到不同的位置或标记中。但与 Google Maps API 第 2 版中的相应行为不同的是，如果您选择进行上述操作，那么，地图可能会立即显示多个 InfoWindow 对象。

要更改信息窗口的位置，您可以对信息窗口调用 setPosition() 以显式的方式更改其位置，或者使用 InfoWindow.open() 方法将信息窗口附加到新标记上。请注意，如果您在没有传递标记的情况下调用了 open()，那么，InfoWindow 将会使用在构建过程中通过 InfoWindow options 对象指定的位置，代码如下：

// 定义显示内容，可以使用html标签显示内容效果
var contentString = '<div id="content">'+'<div id="siteNotice">'+'</div>'+'<h3 id="firstHeading" class="firstHeading">重庆解放碑</h3>'+'<div id="bodyContent">'+'<p>解放碑中央商务区主要以服务业为主，而且主要是占地小、高增值的现代服务业。2006年，解放碑CBD有各类楼宇635幢，其中具有商贸功能的421幢，具有商务功能的192幢，随着世界商贸中心、万豪国际金融中心、世界贸易中心等现代商务楼盘的相继落成）'+'</p>'+'<p>官方地址： <a href="http://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+'http://www.icecedu.cn/</a></p>'+'</div>'+'</div>';
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:"重庆解放碑"
});
//点击Maker标注显示InfoWindow
google.maps.event.addListener(marker, 'click', function() {infowindow.open(map,marker);
});

效果如下图：

以上就是Google离线地图API简单功能开发示例的详细解析，更多相关可参考Google地图官方API文档。

如有疑问欢迎联系QQ：494375696 共同交流探讨。

谷歌离线地图API解析相关推荐

谷歌离线地图Api附获取教程
三版离线Api下载链接:https://pan.baidu.com/s/1ei6tyLKTHMIGdDuowqQW6Q 提取码:x1va GoogleMapAPIV3来自: https://www.c ...
Google离线地图API概要解析
Google离线地图API概要解析发布时间:2018-01-17 版权: 1.说明离线地图发布有多种方式均可以实现,可以利用ArcGis Server.GeoServer等构建地图Web服务器,还 ...
8、谷歌离线地图开发教程
谷歌(百度.高德)离线地图开发环境搭建发布时间:2018-01-17 版权: 1.说明离线地图开发环境支持谷歌地图.百度地图.高德地图等等所有常用地图类型,支持在局域网内的地图部署.二次开发. 2 ...
BIGEMAP(百度、高德、谷歌)离线地图二次开发
(百度.高德.谷歌)离线地图二次开发发布时间:2019-04-10 版权: 1.如何搭建离线地图开发环境 2.下载离线地图数据(金字塔瓦片数据 ...
(百度、高德、谷歌)离线地图二次开发
(百度.高德.谷歌)离线地图二次开发发布时间:2019-04-10 版权: 相关链接:三维(3D)离线地图二次开发 1.如何搭建离线地图 ...
百度离线地图API2.0 百度离线地图api,已经修改源码
百度离线地图API2.0 百度离线地图api,已经修改源码,绕过服务端验证,除了路书等需要服务端数据支持的功能外,其余功能已经全部实现,包括常用的:地图示例.地图控件添加.覆盖物添加.信息窗口展示等等 ...
如何使用Openlayers 3加载谷歌离线地图
谷歌地图部署说明:使用地图下载工具下载的谷歌离线地图大致如下结构,使用合适的WEB服务器发布地图服务. 使用Openlayers 3调用地图服务说明:这里使用ol.source.XYZ(更多语法请 ...
转：谷歌离线地图基础
一.需要文件 gapi3文件夹:存放接口等 tilemap文件夹:存放图片 gapi.js文件 maptool.js文件二.html配置 <script type="text/jav ...
谷歌离线地图的使用(1)
实质: 整个地图都是以由小的地图瓦片组成的,因此可以将这些小瓦片图片保存下来,在需要的时候读取即可. 过程: 客户端将地图的三维坐标发送回服务器,服务器经过计算后,返回对应的图片. API 下载地 ...

谷歌离线地图API解析

[Google离线地图示例解析]

1.说明

2.实现

谷歌离线地图API解析相关推荐

最新文章

热门文章