Object:地图类型/MapType

MapType 对象规范

表示一种地图类型，您可以通过实例化此类自定义地图类型。

方法

方法	返回值	说明
`getTile(tileCoord:Point, zoom:Number, ownerDocument:Document)`	`HTMLElement`	返回指定坐标(x,y)和放大级别处的瓦片节点。生成的瓦片会被插入到指定的ownerDocument中。
`releaseTile(tile:HTMLElement)`	`none`	释放给定的瓦片节点，执行必要的清理。注意此瓦片节点已经从文档中移除。可选。

属性

名称	类型	说明
`alt`	`String`	当此 MapType 的按钮悬停在 MapTypeControl 中时显示的备选文本。可选。
`maxZoom`	`Number`	显示此 MapType 时地图的最大缩放级别。对于基本 MapType，为必填项。而对于叠加层 MapType，则将其忽略。
`minZoom`	`Number`	显示此 MapType 时地图的最小缩放级别。可选；默认值为 0。
`name`	`String`	要在 MapTypeControl 中显示的名称。可选。
`projection`	`Projection`	用于渲染此 MapType 的投影。可选；默认值为 Mercator。
`radius`	`Number`	地图的行星半径（以米为单位）。可选；默认为地球的赤道半径（6378137 米）。
`tileSize`	`Size`	每个图块的尺寸。必填。

实例

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

JavaScript

//按照MapType规范自定义一个类
function CoordMapType() {}
//设置MapType属性
//设置每个图块的尺寸
CoordMapType.prototype.tileSize = new qq.maps.Size(256, 256);
//设置该地图类型的最大缩放级别
CoordMapType.prototype.maxZoom = 19;
//设置该地图类型的最小缩放级别，默认值为0
CoordMapType.prototype.minZoom = 3;
//设置在 MapTypeControl 中显示的名称
CoordMapType.prototype.name = '网格';
//设置鼠标停留在控件上时显示的内容（对空间名称的解释）
CoordMapType.prototype.alt = '显示自定义网格';
//返回指定坐标和放大级别处的瓦片，节点生成的瓦片会被插入到指定的ownerDocument中
CoordMapType.prototype.getTile = function(coord, zoom, ownerDocument) {
    //设置ownerDoucment容器
    var div = ownerDocument.createElement('div');
    //设置内容和样式
    div.innerHTML = coord;
    div.style.width = this.tileSize.width + 'px';
    div.style.height = this.tileSize.height + 'px';
    div.style.fontSize = '10';
    div.style.borderStyle = 'solid';
    div.style.borderWidth = '1px';
    div.style.borderColor = '#AAAAAA';
    div.style.backgroundColor = '#E5E3DF';
    setTimeout(function() {
        qq.maps.event.trigger(div, "load");
    }, 0);
    return div;
};

var coordinateMapType = new CoordMapType();
var map;

function init() {
    map = new qq.maps.Map(document.getElementById("container"), {
        // 地图的中心地理坐标。
        center: new qq.maps.LatLng(39.916527, 116.397128),
        zoomLevel: 14,
        mapTypeId: 'coordinate',
        //设置地图的类型的初始化选项为自定义类型和普通地图类型
        mapTypeControlOptions: {
            mapTypeIds: ['coordinate', coordinateMapType]
        }
    });
    map.mapTypes.set('coordinate', coordinateMapType);
}

JavaScript+HTML

<!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>
        //按照MapType规范自定义一个类
        function CoordMapType() {}
         //设置MapType属性
         //设置每个图块的尺寸
        CoordMapType.prototype.tileSize = new qq.maps.Size(256, 256);
         //设置该地图类型的最大缩放级别
        CoordMapType.prototype.maxZoom = 19;
         //设置该地图类型的最小缩放级别，默认值为0
        CoordMapType.prototype.minZoom = 3;
         //设置在 MapTypeControl 中显示的名称
        CoordMapType.prototype.name = '网格';
         //设置鼠标停留在控件上时显示的内容（对空间名称的解释）
        CoordMapType.prototype.alt = '显示自定义网格';
         //返回指定坐标和放大级别处的瓦片，节点生成的瓦片会被插入到指定的ownerDocument中
        CoordMapType.prototype.getTile = function(coord, zoom, ownerDocument) {
            //设置ownerDoucment容器
            var div = ownerDocument.createElement('div');
            //设置内容和样式
            div.innerHTML = coord;
            div.style.width = this.tileSize.width + 'px';
            div.style.height = this.tileSize.height + 'px';
            div.style.fontSize = '10';
            div.style.borderStyle = 'solid';
            div.style.borderWidth = '1px';
            div.style.borderColor = '#AAAAAA';
            div.style.backgroundColor = '#E5E3DF';
            setTimeout(function() {
                qq.maps.event.trigger(div, "load");
            }, 0);
            return div;
        };

        var coordinateMapType = new CoordMapType();
        var map;

        function init() {
            map = new qq.maps.Map(document.getElementById("container"), {
                // 地图的中心地理坐标。
                center: new qq.maps.LatLng(39.916527, 116.397128),
                zoomLevel: 14,
                mapTypeId: 'coordinate',
                //设置地图的类型的初始化选项为自定义类型和普通地图类型
                mapTypeControlOptions: {
                    mapTypeIds: ['coordinate', coordinateMapType]
                }
            });
            map.mapTypes.set('coordinate', coordinateMapType);
        }
    </script>
</head>

<body onload="init();">
    <div style="width:603px;height:300px" id="container"></div>
</body>

</html>

新窗口打开在线试一试