google离线地图制作
来源:互联网 发布:暮色谷的新域名问题 编辑:程序博客网 时间:2024/05/22 06:43
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*256 map.overlayMapTypes.insertAt(0, new CoordMapType(new google.maps.Size(256, 256)));
html代码:
<body onload="initialize()"> <div id="map_canvas" style="width: 80%; height: 630px;"></div></body>好像只能在body中写onload="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/ 更多干货等你来拿
1 0
- google离线地图制作
- 制作 IPhone/ITouch 可以用的 Google Map 离线地图
- iPhone4离线地图制作
- 离线地图制作
- 离线地图制作工具
- Google map离线API实现离线地图
- 如何构建离线Google地图
- Google API 地图离线版
- Google API 地图离线版
- 手机离线地图制作工具
- Google Maps API V3 更新程序 离线地图开发包制作工具
- google map v3离线版地图
- Google Map 离线地图 - "Ok Maps"
- Google Maps API加载MBTiles离线地图
- 手把手教你制作手机离线地图
- 离线地图制作工具:Mobile Atlas Creator
- 使用NetMap制作离线地图标注软件
- 制作成tpk地图格式文件,离线装载
- 世界时间UT和协调世界时间UTC
- 2016我来了
- boost常用库案例
- lua tutorial 04
- Jenkins持续集成
- google离线地图制作
- //UITextField控制只输入数字
- 瀑布流特效,回到顶部特效,放大镜特效,选项卡原理分析
- Java 使用 SlfLog4J 写日志
- Python基础(一)Hello World!
- java 继承、抽象、private、static、final关键字在类中的使用
- 自定义tablebar
- 广播实现的方式
- 关于 angularjs 的小结