google离线地图制作

阳光穿透心脏的1/2处 2022-08-19 04:53 411阅读 0赞

# 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][http_download.csdn.net_detail_qq_19558705_9389057]

google演示代码：[http://download.csdn.net/detail/qq\_19558705/9389076][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中写ο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.画圆：

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_blog.csdn.net_qq_19558705]

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

[http_download.csdn.net_detail_qq_19558705_9389057]: http://download.csdn.net/detail/qq_19558705/9389057
[http_download.csdn.net_detail_qq_19558705_9389076]: http://download.csdn.net/detail/qq_19558705/9389076
[http_blog.csdn.net_qq_19558705]: http://blog.csdn.net/qq_19558705
[http_www.itit123.cn]: http://www.itit123.cn/