JavaScript API

qq.maps.ImageMapType 类

此类实现了MapType接口，可用来渲染图像瓦片。

构造函数

构造函数
ImageMapType(opts:ImageMapTypeOptions)

方法

方法	返回值	说明
getOpacity()	Number	得到ImageMapType瓦片的透明度（0（完全透明）到 1.0）。
setOpacity(opacity:Number)	none	设置ImageMapType的透明度（0（完全透明）到 1.0）。

事件

事件名	参数	说明
tilesloaded	none	当地图容器中可见的瓦片加载完后会触发此事件。当使用Map类的setMapTypeId方法将ImageMapType加到地图而不是添加到overlayMapTypes里时，请监听Map的tilesloaded事件。

实例

本示例中，介绍如何设置自定义瓦片地图

<!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">
        * {
            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>
        //按照ImageMapType规范自定义一个类
        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
            };
        }
         //新建一个ImageMapType，实现ImageMapTypeOptions规范
        var earthlayer = new qq.maps.ImageMapType({
            //设置在 MapTypeControl 中显示的名称
            name: '绿色家园',
            //设置鼠标停留在控件上时显示的内容（对空间名称的解释）
            alt: '绿色家园',
            //设置瓦片的尺寸
            tileSize: new qq.maps.Size(256, 256),
            //设置该地图类型的最小缩放级别
            minZoom: 1,
            //设置该地图类型的最大缩放级别
            maxZoom: 5,
            //通过传入的瓦片坐标(x,y)以及zoom级别返回瓦片的URL(string类型)
            getTileUrl: function(tile, zoom) {
                var normalizedCoord = getNormalizedCoord(tile, zoom);
                if (!normalizedCoord) {
                    return null;
                }
                var z = zoom,
                    x = tile.x,
                    y = tile.y;
                return 'https://lbs.qq.com/doc/sample/img/earth/tile_' + z + '_' + normalizedCoord.x + '-' + normalizedCoord.y + '.png';
            }
        });
 
 
        var map;
 
        function init() {
            map = new qq.maps.Map(document.getElementById("container"), {
                // 地图的中心地理坐标。
                center: new qq.maps.LatLng(39.916527, 116.397128),
                zoom: 2,
                mapTypeId: 'coordinate',
                mapTypeControlOptions: {
                    mapTypeIds: ['earth']
                }
            });
            map.mapTypes.set('earth', earthlayer);
            map.setMapTypeId('earth');
            var info_span = document.getElementById("info");
            var n = 0;
            //监听ImageMapType图片加载
            qq.maps.event.addListener(map, "tilesloaded", function() {
                info_span.innerText = "tilesloaded:第" + ++n + "次";
            });
        }
    </script>
</head>
 
<body onload="init();">
    <div style="width:603px;height:300px" id="container"></div>
    <span id="info"></span>
</body>
 
</html>

在线试一试

这篇文章对您解决问题是否有帮助？

已解决

未解决