google离线地图展示和渲染

由于项目的需要，在线地图无法满足业务需要，于是要做离线地图。经过一段时间的调研，最后选择了谷歌离线地图

原因是通过现成的工具便可完成。感谢前人栽的树，在此整理总结。

以下内容和代码是调研时准备的，仅供参考使用。

离线地图制作
技术：google map api
准备：google map api v3 离线版，地图切图工具，Google_Maps_API_V3文档和Google_Maps_JavaScript_API_V3_自用版本文档

google地图瓦片下载工具：http://download.csdn.net/detail/qq_19558705/9389057

google演示代码：http://download.csdn.net/detail/qq_19558705/9389076

离线地图的加载：
打开加载离线地图页面offlineMap.html

加载本地地图的函数：

function LocalMapType() {}LocalMapType.prototype.tileSize = new google.maps.Size(256, 256);LocalMapType.prototype.maxZoom = 13;  // 地图显示最大级别LocalMapType.prototype.minZoom = 9;   // 地图显示最小级别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 strURL = "gmap/tiles/" + zoom + "/" + coord.x + "/" + coord.y + ".png"; img.src = strURL;return img;};var localMapType = new LocalMapType();

初始化地图函数：

function initialize() {// 以该经纬度为中心居中显示，注意google 一般先写纬度，在写经度var myLatlng = new google.maps.LatLng(30.51667,114.31667); var myOptions = {center: myLatlng,zoom: 10,        // 初始化地图默认级别streetViewControl: false,     // 默认不显示全景图mapTypeControlOptions: {mapTypeIds: ["local", google.maps.MapTypeId.ROADMAP] // 地图类型为普通街道地图}};var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);map.mapTypes.set('local', localMapType);map.setMapTypeId('local');// 设置地图瓦片大小为256*256map.overlayMapTypes.insertAt(0, new CoordMapType(new google.maps.Size(256, 256)));

html代码：

<body οnlοad="initialize()"><div id="map_canvas" style="width: 80%; height: 630px;"></div>
</body>

好像只能在body中写οnlοad="initialize()" 函数。笔者打算用sitemesh整合离线地图页面时出现了问题，就是因为该函数只能在body中写，在div或者其他标签中不生效。若有其他办法解决请赐教。

以上便可以加载离线地图
如果需要修改显示的离线地图，一般只需要修改一下内容即可
LocalMapType函数中的 LocalMapType.prototype.maxZoom，LocalMapType.prototype.minZoom， strURL，
initialize函数中的 myLatlng，zoom

离线地图源的制作：
打开GoogleMap切图工具文件->GoogleTileDownload->修改conf.properties文件
修改的内容：
zoom=2 : 地图显示的等级
leftTopLnglat=114, 31 : 地图左上角经纬度
rightBottomLnglat=115, 30 : 地图右下角经纬度
具体方法看google离线地图下载工具中的readme.txt文件。该工具生产的地图源图片的规律满足上面的strURL的加载算法

在离线的情况下渲染离线地图：
1.加载图片：

var image = 'icon/0.png'; // 存放图片的路径var myLatLng = new google.maps.LatLng(30.51667,114.31667); // 图片显示的地方var beachMarker = new google.maps.Marker({position: myLatLng,map: map,icon: image
});

2.画折线：

var flightPlanCoordinates = [new google.maps.LatLng(30.51667,114.31667),new google.maps.LatLng(30.50667,114.32667),new google.maps.LatLng(30.40667,114.30667)];var flightPath = new google.maps.Polyline({path: flightPlanCoordinates,strokeColor: "#FF0000",strokeOpacity: 1.0,strokeWeight: 2});flightPath.setMap(map); // 如果想还原去掉折线用：flightMap.setMap(null)

3.画圆：

 var citymap = {};  citymap['chicago'] = {  center: new google.maps.LatLng(31.18439, 121.49454),  population: 284259 }; citymap['newyork'] = {  center: new google.maps.LatLng(31.38439, 121.52454),  population: 814319 };var cityCircle;for (var city in citymap) {  var populationOptions = {  strokeColor: "#FF0000",  strokeOpacity: 0.8,  strokeWeight: 1,  fillColor: "#FF0000",  fillOpacity: 0.35,  map: map,  center: citymap[city].center,  radius: citymap[city].population / 1000  };  cityCircle = new google.maps.Circle(populationOptions);  }

4.画多边形：

// 如果是多边形，最后一个点不需要写成第一个点就可以自动连起来var triangleCoords = [  new google.maps.LatLng(30.51667,114.31667),new google.maps.LatLng(30.50667,114.42667),new google.maps.LatLng(30.40667,114.30667)];  bermudaTriangle = new google.maps.Polygon({  paths: triangleCoords,  strokeColor: "#FF0000",  strokeOpacity: 0.8,  strokeWeight: 2,  fillColor: "#FF0000",  fillOpacity: 0.35  });  bermudaTriangle.setMap(map);

以上便是我项目中用到的内容，仅供参考。若有不对的地方，或者更好的方法。请指出。转载请注明来源：http://blog.csdn.net/qq_19558705

个人主页：http://www.itit123.cn/ 更多干货等你来拿

google离线地图制作相关推荐

离线地图制作器，一千多种地图一网打尽
离线地图制作器,一千多种地图一网打尽我们很多时候需要使用离线地图,比如需要节省流量,有些户外运动的地点可能没有网络,或者在单位内部网络建立离线地图服务器等. 在手机上有不少的离线地图app,比如Or ...
oruxmaps离线地图下载（制作离线地图包）（全国任意地方的离线地图制作）
Oruxmaps作为一款非常强大的户外gps导航软件,可以实现离线地图导航,在没有手机信号.飞行模式下都可以正常导航:同时功能强大,可以自定义离线地图,支持记录/跟踪轨迹.导入/导出航迹.根据航迹导航 ...
Google离线地图API概要解析
Google离线地图API概要解析发布时间:2018-01-17 版权: 1.说明离线地图发布有多种方式均可以实现,可以利用ArcGis Server.GeoServer等构建地图Web服务器,还 ...
2019百度地图离线地图制作
根据项目内网需求需要制作一个离线地图,因为外网访问不了在线地图api,因此这里使用了百度的离线地图,当时网上也找过,资源很少,需要改源文件,但很多是16年的帖子了,一改就错,因为百度更新了... 所以 ...
google离线地图实例，加载本地地图瓦片，支持点线面及图文标注，坐标定位，卫星、电子地图切换
说明: 1.无偏移坐标定位: 2.可以自由搭配点线面配置信息(颜色.粗细.透明度等): 3.地图级别自定义: 4.中心点自定义: 5.ajax提交通过php保存到mysql数据库(保存相应的标注信息, ...
（2018）Oruxmaps最新离线地图(地图包)制作教程
Oruxmaps作为一款非常强大的户外gps导航软件,可以实现离线地图导航,在没有手机信号.飞行模式下都可以正常导航:同时功能强大,可以自定义离线地图,支持记录/跟踪轨迹.导入/导出航迹.根据航迹导航 ...
Oruxmaps离线地图-最新制作教程（支持谷歌地图、卫星地图、地形图、百度地图、高德地图）
Oruxmaps作为一款非常强大的户外gps导航软件,可以实现离线地图导航,在没有手机信号.飞行模式下都可以正常导航:同时功能强大,可以自定义离线地图,支持记录/跟踪轨迹.导入/导出航迹.根据航迹导航 ...
【BIGEMAP一键离线地图服务】
地址:http://www.bigemap.com/offlinemaps/ 首页离线地图代码示例项目案例开发文档关于我们 [BIGEMAP一键离线服务] 1.快速搭建离线地图服务 2.支持 ...
新版手机离线地图GPS定位程序
新版手机离线地图GPS定位程序新版手机离线地图GPS定位程序是运行WindowsMobile操作系统手机上的一款应用程序,它的作用是为手机用户提供离线地图服务.也就是说不需要网络,不需要手机信号,不 ...
离线地图开发-含源代码(免费)
相关教程: 1.如何搭建WEB离线地图开发环境 2.下载离线地图数据(金字塔瓦片数据) 3.离线地图二次开发接口(W ...

google离线地图制作

google离线地图展示和渲染

google离线地图制作相关推荐

最新文章

热门文章