JavaScript API

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>

在线试一试

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

已解决

未解决