谷歌离线地图 教程

地图展示

编辑时间:2017-03-06

QQ截图20170302153517.png


创建一个最简单的地图


代码如下:


<!DOCTYPE html>
<
html>
<
head>
    <
meta name="viewport"
         
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <
meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <
title>google</title>
    <
link rel="stylesheet" type="text/css" href="pub/css/console.css"/>
    <
script type="text/javascript" src="main.js"></script>
    <
script type="text/javascript" src="pub/js/maplabel-compiled.js"></script>
</
head>
<
body>
<
div id="map_canvas" style="width: 100%"></div>
</
body>
</
html>
<
script type="text/javascript">
   
var map;
      
//自定义地图
   
function BigeMap() {}
      
//地图下属瓦片大小
   
BigeMap.prototype.tileSize = new google.maps.Size(256, 256);
      
//地图最大级别
   
BigeMap.prototype.maxZoom = 19;
      
//地图最小级别
   
BigeMap.prototype.minZoom = 4;
      
//地图名称
   
BigeMap.prototype.name = "地图";
      
//此地图种类获取URL的地址
   
BigeMap.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";
       
//这里使用谷歌在线的数据,当然您也可以使用Bigemap地图下载器下载的离线瓦片作为此处的地址
       
var strURL = 'http://mt0.google.cn/vt/lyrs=m@365000000&hl=zh-CN&gl=cn&x=' + coord.x + '&y=' + coord.y + '&z=' + zoom + '&s=Galil';
       
img.src = strURL;
       
return img;
   
};

   
var google_map = new BigeMap();

   
var myOptions = {
         
//设置中心点
     
center: new google.maps.LatLng(30.54024807, 104.06966686),
       
//默认显示级别
     
zoom: 4,
       
//是否显示街景 因为大部分是离线,所以不需要显示
     
streetViewControl: false,
       
mapTypeControlOptions: {
           
mapTypeIds: ['google_online_map']
       
}
    }
;
      
//初始化map对象
   
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
      
//map对象中添加一种地图
   
map.mapTypes.set('google', google_map);
      
//设置map对象默认显示 google 地图 也就是上面的google_map对象
   
map.setMapTypeId('google');
</script>