google map V3离线地图显示混合图-CSDN博客

本文链接：https://blog.csdn.net/iteye_751/article/details/82538549

本文介绍了一种利用Google Maps API实现离线地图的方法，并通过双图叠加技术实现了混合地图效果。具体步骤包括下载API和离线地图数据，配置地图显示参数等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

[b]配置：[/b][list]
[*]1.下载google地图的api。
[*]2.google地图离线下载器下载离线地图，并将地图放入tomcat服务中。
[*]3.GoogleMapAPIV3.zip为google的api。
[*]4.gmap3v5.1.1.zip为jquery版本。
[*]5.全能电子地图下载器旗舰版注册.rar由于文件太大，分为8部分都下载解压即可。下载后，先安装软件，然后将keygen.exe拷贝到安装根目录，执行后按步骤操作即可。
[/list]
[b]实现原理：[/b]由于google不提供离线混合图效果api，所以使用双图叠加进行实现

[b]开发主要代码：[/b]


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"); // 指定显示卫星地图