文档章节

谷歌离线地图API解析

luopWeblife
 luopWeblife
发布于 2016/04/08 13:08
字数 2149
阅读 573
收藏 1

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 共同交流探讨。


© 著作权归作者所有

luopWeblife
粉丝 0
博文 1
码字总数 2149
作品 0
成都
私信 提问
加载中

评论(1)

叶落无声yl
请问能否公布一下所需的js问价?
百度离线地图资源

离线地图资源,完全可脱离互联网访问,正在发愁局域网或内网使用地图定位的小伙伴们福音来了。。。。。。哈哈哈哈哈!!! 支持各大主流浏览器 IE7、8、9、10,火狐、360浏览器、谷歌浏览器 ...

迷猫
2016/11/12
883
0
谷歌恢复Android版谷歌地图离线访问功能

在用户纷纷抱怨新版Android谷歌地图存储地图缓存信息以便离线时使用的功能存在问题一天后,谷歌很快更新了地图应用,修复了该问题。实际上地图的缓 存功能是相当有用的,尤其是当用户在外旅行...

oschina
2013/07/12
1K
7
今年谷歌 I/O 大会主题演讲有这 6 大亮点

即使是凌晨播出,仍有一群科技宅们盯在电脑前看谷歌I/O大会的直播;即使直播长达3个小时,仍有一群谷歌粉抛弃女友(鉴于多是男粉),瞪着充满血丝的双眼,不肯放过一个细节。当然,还有我们这...

oschina
2015/05/29
3.6K
19
离线地图的数据格式,如何提高读取速度

最近在做一个地图项目,现在涉及到离线地图的问题,想请教下离线地图怎么保存比较好那 1) 保存在文件里面? 2) 保存在数据库里面 这个两种方法都涉及到解析二进制数据的问题,会降低离线地图...

xxxrqec
2013/09/22
1K
8
有没有人知道制作地图离线包问题

现在什么地图引擎提供个人制作地图数据包功能,即制作离线地图数据包。 其实,我就是想制作一个地图数据包,在离线的时候加载这个数据包(别问我为什么不下载离线包,偏要自己制作一个,因为...

sstxut11
2015/10/15
124
0

没有更多内容

加载失败,请刷新页面

加载更多

好程序员大数据教程Scala系列之样例类_Option_偏函数

  好程序员大数据教程Scala系列之样例类_Option_偏函数,在Scala中Option类型样例类用来表示可能存在或也可能不存在的值(Option的子类有Some和None)。Some包装了某个值,None表示没有值。 ...

好程序员官网
17分钟前
3
0
zk中ServerCnxnFactory连接管理工厂

作为ServerCnxn的工厂抽象类 属性 ZOOKEEPER_SERVER_CNXN_FACTORY zookeeper.serverCnxnFactory secure 在ServerCnxnFactory中SSL是否启用 sessionMap session管理配置中信息(sessionId,Ser......

writeademo
18分钟前
3
0
【代码审计01】几种常见的漏洞种类以及代码审计工具

前言 代码审计是在经过黑盒测试完毕,也就是检查应用的基本功能是否符合产品业务需求下进行的。需要有一定的编码基础以及对漏洞形成原理的基本认知,通过工具或者经验检测中代码中可能出现的...

北桥苏
19分钟前
4
0
重磅发布 | 全球首个云原生应用标准定义与架构模型 OAM 正式开源

作者: OAM 项目负责人 导读:2019 年 10 月 17 日,阿里巴巴合伙人、阿里云智能基础产品事业部总经理蒋江伟(花名:小邪)在 Qcon 上海重磅宣布,阿里云与微软联合推出开放应用模型 Open A...

阿里巴巴云原生
21分钟前
3
0
【进阶之定义函数】一个查询树结构数据的集合

1、基本定义 delimiter 自定义符号  -- 如果函数体只有一条语句, begin和end可以省略, 同时delimiter也可以省略create function 函数名(形参列表) returns 返回类型  -- 注意是retru...

卯金刀GG
27分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部