代码如下,完全贴合火星坐标
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>叠加自定义瓦片</title>
<style type="text/css">
html,body{
width:100%;
height:100%;
}
#container{
width:100%;
height:90%;
}
* {
margin: 0px;
padding: 0px;
}
body, button, input, select, textarea {
font: 12px/16px Verdana, Helvetica, Arial, sans-serif;
}
p {
width: 603px;
padding-top: 3px;
overflow: hidden;
}
.btn {
width: 100px;
height: 26px
}
</style>
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
<script>
function getNormalizedCoord(coord, zoom) {
var y = coord.y;
var x = coord.x;
var tileRange = 1 << zoom;
if (y < 0 || y >= tileRange) {
return null;
}
if (x < 0 || x >= tileRange) {
x = (x % tileRange + tileRange) % tileRange;
}
return {
x: x,
y: y
};
}
var map;
function init() {
//新建一个ImageMapType,实现ImageMapTypeOptions规范
var earthlayer = new qq.maps.ImageMapType({
tileSize: new qq.maps.Size(256, 256),
minZoom: 1,
maxZoom: 5,
opacity: 1,
getTileUrl: function (tile, zoom) {
var normalizedCoord = getNormalizedCoord(tile, zoom);
//console.log(normalizedCoord.x);
var z = zoom,
x = tile.x,
y = tile.y;
return 'https://gac-geo.googlecnapps.cn/maps/vt?lyrs=s,m&gl=CN&x='+normalizedCoord.x+'&y='+normalizedCoord.y+'&z='+z;
}
});
map = new qq.maps.Map(document.getElementById("container"), {
// 地图的中心地理坐标。
center: new qq.maps.LatLng(29.566981, 106.588633),
zoom: 15
});
map.overlayMapTypes.push(earthlayer);
var info_span = document.getElementById("info");
var n = 0;
//监听ImageMapType图片加载
qq.maps.event.addListener(earthlayer, "tilesloaded", function () {
info_span.innerText = "tilesloaded:第" + ++n + "次";
});
qq.maps.event.addListener(map, 'click', function(event) {
var marker=new qq.maps.Marker({
position:event.latLng,
map:map
});
});
}
</script>
</head>
<body onload="init();">
<div id="container"></div>
<span id="info"></span>
</body>
</html>
新版API
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>自定义栅格图层</title>
</head>
<script charset="utf-8"
src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
<style type="text/css">
html,
body {
height: 100%;
margin: 0px;
padding: 0px;
}
#mapContainer {
width: 100%;
height: 100%;
}
</style>
<body>
<div id="mapContainer"></div>
<script>
var center = new TMap.LatLng(26.870355,100.239704);//设置中心点坐标
//初始化地图
var map = new TMap.Map('mapContainer', {
center: center,
zoom: 15,
maxZoom:19
});
//初始化imageTileLayer
var imageTileLayer = new TMap.ImageTileLayer({
getTileUrl: function (x, y, z) {
//拼接瓦片URL
var url='https://gac-geo.googlecnapps.cn/maps/vt?lyrs=s,m&gl=CN&x='+x+'&y='+y+'&z='+z ;
return url;
},
tileSize: 256, //瓦片像素尺寸
minZoom: 1, //显示自定义瓦片的最小级别
maxZoom: 19, //显示自定义瓦片的最大级别
visible: true, //是否可见
zIndex: 5000, //层级高度(z轴)
opacity: 1, //图层透明度:1不透明,0为全透明
map: map, //设置图层显示到哪个地图实例中
});
</script>
</body>
</html>