配置:
- 1.下载google地图的api。
- 2.google地图离线下载器下载离线地图,并将地图放入tomcat服务中。
- 3.GoogleMapAPIV3.zip为google的api。
- 4.gmap3v5.1.1.zip为jquery版本。
- 5.全能电子地图下载器旗舰版注册.rar由于文件太大,分为8部分都下载解压即可。下载后,先安装软件,然后将keygen.exe拷贝到安装根目录,执行后按步骤操作即可。
实现原理:由于google不提供离线混合图效果api,所以使用双图叠加进行实现
开发主要代码:
var localMapType = {
tileSize : new google.maps.Size(256, 256),
maxZoom : 14, // 地图显示最大级别
minZoom : 5, // 地图显示最小级别
name : "卫星",
alt : "显示本地地图数据",
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 ="http://localhost/gis/maptile/sosomaps/satellite/";
strURL += zoom + "/" + coord.x + "/" + coord.y + ".jpg";//本地卫星图片服务器地址
img.src = strURL;
return img;
}
};
var localMapType2 = {
tileSize : new google.maps.Size(256, 256),
maxZoom : 14, // 地图显示最大级别
minZoom : 5, // 地图显示最小级别
name : "街道",
alt : "显示本地地图数据",
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 ="http://localhost/gis/maptile/tianditu/overlay_s/";
strURL += zoom + "/" + coord.x + "/" + coord.y + ".png";//本地街道图片服务器地址
img.src = strURL;
return img;
}
};
var myLatlng = new google.maps.LatLng(31.131991, 121.23636);
var myOptions = {
center : myLatlng,
zoom : 9,
streetViewControl : false,
mapTypeControlOptions : {
mapTypeIds : [
google.maps.MapTypeId.ROADMAP,
google.maps.MapTypeId.HYBRID,//google自带的,混合图,必须联网才能使用,所以必须自己拓展。
google.maps.MapTypeId.SATELLITE,//google自带的,卫星图,在线的。
google.maps.MapTypeId.TERRAIN,//google自带的,街道图
'locaMap','locaMap2']//右上角切换图形按钮
}
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
map.mapTypes.set("locaMap", localMapType); // 绑定本地卫星地图
map.mapTypes.set("locaMap2", localMapType2); // 绑定本地街道地图
map.overlayMapTypes.push(localMapType2); // 注意:由于googole未开放混合图接口,所以此处将街道地图覆盖在卫星地图之上达到混合图效果。
map.setMapTypeId("locaMap"); // 指定显示卫星地图
分享到:
相关推荐
google map v3离线地图资源包,原博文链接源码
谷歌离线地图显示,或者在线地图显示,坐标位置标记
1.vue-baidu-map在线地图代码不用改动,只用按照文档添加baidu-api.js和baidu-init.js,并在vue依赖包 node_modules文件找到,修改vue-baidu-map的 index.js文件 就能完成离线配置 2.jar包可以免费下载百度地图瓦片...
采用离线的 Google Map API 加载离线水经注谷歌地图下载器的地图数据
mapinfor离线地图 包含31个省市自治区的省界,以及这31个省市自治区的市界、县界及其名称等,非常详细
GoogleMaps API V3离线下载工具及使用.zip 主要对其地图的下载,及自我编制。 离线下完全可以使用,只需先进行地图的下载。 添加了控件,离线下可进行操作。。。
谷歌地图5.0 离线数据地图 北京地区 共6个文件 放到sd card/android/data/ 另外需要一个com.google.android.apps.maps(合并).bat文件合并。 请下载完整,包括(1)(2)(3)(4)(5)(6) 本人可一直在用。如需要...
Qt4.8.6加载百度离线地图,实现了街道图和卫星图的切换,实现了地图中标签的移动,实现了获取地图坐标并在Qt界面显示。绝对原创,保证可用
谷歌离线地图引擎,含地图调用demo,可以直接运行,具有一定参考意义
VUE 离线地图的下载与使用,下载瓦片离线使用
我使用的目录是maptile(卫星地图)和maptile_(街道地图)。这样通过html引用百度离线API时,地图就显示出来了。 参考链接:http://www.cnblogs.com/i-gps/archive/2012/11/28/2791826.html 4.Qt与JavaScript的交互 ...
封装了一个最新的3.18.0版本的离线开发包,测试了一下,在线街道图、地形图、离线地图均正常。
适用于谷歌地球离线瓦片下载,支持多线程应用下载,可下载1-19层谷歌地图
GMap.NET下载离线地图下载即用谷歌百度腾讯高德
离线地图,script引入 vue适用
1)支持显示卫星混合地图,瓦片图放到 tiles_hybrid 目录下 2)支持支定义混合图,瓦片图放到 tiles_self 目录下 3)增加根据城市名称设置地图中心, 请自行扩展map_city.js 4)增加鼠标测距示例 5)增加鼠标绘制线面...
在线地图 利用google map api 、天地图api、MapBar api、进行地图开发 离线地图 地图保存到本地,用现有技术对数据进行访问。
• 大量的预定义图块源:Google地图,Mapbox,ArcGIS,诺基亚地图,必应地图,Open Street Maps和其他许多地图项(16个提供程序,88种地图类型); • 能够创建自己的地图样式或使用自己的图块源(例如,WMS); • ...
html里面的js代码含如下功能: 1、离线地图加载,缩小到第四级别可以看见离线地图。 2、影像图与路网图叠加 3、坐标系转换 4、两种不同风格的轨迹回放 5、添加marker点和信息 对于新手来说,非常具有参考价值。
Google Maps API v3离线开发包,带本地地图示例数据 需要特别说明的是: 1、本离线开发包内仅实现了功能离线,即js源码和部分控件图片的离线,地图仍然使用Google Tile。 2、从思路上讲,将Google Tile下载到本地...