地圖上嵌套手繪地圖--實現效果：
這裏用到了地圖的圖層
簡單一個完整Demo代碼
<!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:16
});
//初始化imageTileLayer
var imageTileLayer = new TMap.ImageTileLayer({
getTileUrl: function (x, y, z) {
//拼接瓦片URL
var url='https://3gimg.qq.com/visual/lbs_gl_demo/image_tiles_layers/' + z + '/' + x + '_' + y +'.png' ;
return url;
},
tileSize: 256, //瓦片像素尺寸
minZoom: 14, //顯示自定義瓦片的最小級別
maxZoom: 16, //顯示自定義瓦片的最大級別
visible: true, //是否可見
zIndex: 5000, //層級高度（z軸）
opacity: 0.95, //圖層透明度：1不透明，0爲全透明
map: map, //設置圖層顯示到哪個地圖實例中
});
</script>
</body>
</html>