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 每个图块的尺寸。必填。

实例

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

<!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>

在线试一试

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

已解决
未解决