Object:地图/MapOptions - 腾讯地图API

MapOptions 对象规范

地图参数，通过这个参数来控制初始化地图的中心点、缩放级别、地图类型、地图样式等等。

属性

名称	类型	说明
`center`	`LatLng`	初始化地图中心坐标。
`zoom`	`Number`	初始化地图缩放级别。
`minZoom`	`Number`	设置地图的最小缩放级别。
`maxZoom`	`Number`	设置地图的最大缩放级别。
`mapZoomType`	`MapZoomType`	缩放类型，可设置以地图中心点或双指中心点为焦点（移动端）。
`noClear`	`Boolean`	如果为 true，在初始化地图时不会清除地图容器内的内容。
`backgroundColor`	`String`	用作地图 div 的背景颜色。当用户进行平移时，如果尚未载入图块，则显示此颜色。仅在地图初始化时，才能设置此选项。
`boundary`	`LatLngBounds`	boundary规定了地图的边界，当拖拽超出限定的边界范围后，会固定住，不能移出去。
`draggableCursor`	`String`	地图的默认鼠标指针样式。
`draggingCursor`	`String`	拖动地图时的鼠标指针样式。
`mapTypeId`	`MapTypeId`	地图类型ID。
`mapStyleId`	`String`	地图样式ID，有效值为‘style[编号]’，与key绑定，详见个性化地图配置页面。
`draggable`	`Boolean`	如果为 false，则禁止拖动地图。默认情况下启用拖动。
`scrollwheel`	`Boolean`	如果为 false，则停用通过滚轮缩放地图的功能。默认情况下启用滚轮功能。
`disableDoubleClickZoom`	`Boolean`	启用/停用在双击鼠标左键时时放大地图。默认情况下处于启用状态。
`keyboardShortcuts`	`Boolean`	如果为 false，则禁止通过键盘控制地图。默认情况下启用键盘快捷键。
`mapTypeControl`	`Boolean`	地图类型控件的初始启用/停用状态。
`mapTypeControlOptions`	`MapTypeControlOptions`	地图类型控件的初始化选项。
`panControl`	`Boolean`	平移控件的初始启用/停用状态。
`panControlOptions`	`PanControlOptions`	平移控件的初始化参数。
`zoomControl`	`Boolean`	缩放控件的初始启用/停用状态。
`zoomControlOptions`	`ZoomControlOptions`	缩放控件的初始化选项。
`scaleControl`	`Boolean`	比例尺控件的初始启用/停用状态。
`scaleControlOptions`	`ScaleControlOptions`	比例尺控件的初始化参数。

实例

本示例中，介绍如何使用地图参数

JavaScript

function init() {
    var sw = new qq.maps.LatLng(39.96693, 116.49369); //西南角坐标
    var ne = new qq.maps.LatLng(39.88795, 116.28666); //东北角坐标
    var map = new qq.maps.Map(document.getElementById("container"), {
        // 地图的中心地理坐标。
        center: new qq.maps.LatLng(39.916527, 116.397128),

        //初始化地图缩放级别
        zoom: 12,

        //如果为 true，在初始化地图时不会清除地图容器内的内容
        noClear: true,

        //用作地图 div 的背景颜色。当用户进行平移时，如果尚未载入图块，则显示此颜色。
        //仅在地图初始化时，才能设置此选项
        backgroundColor: "#000000",

        //boundary规定了地图的边界，当拖拽超出限定的边界范围后，会自动移动回来
        //boundary:new qq.maps.LatLngBounds (ne, sw),

        //地图的默认鼠标指针样式
        draggableCursor: "crosshair",

        //拖动地图时的鼠标指针样式
        draggingCursor: "pointer",

        //地图类型ID
        mapTypeId: qq.maps.MapTypeId.SATELLITE,

        //地图样式ID
        mapStyleId: 'style3',

        //若为false则禁止拖拽
        draggable: true,

        //若为false则禁止滑轮滚动缩放
        scrollwheel: true,

        //若为true则禁止双击放大
        disableDoubleClickZoom: false,

        //若为false则禁止键盘控制地图
        keyboardShortcuts: true,

        //地图类型控件，若为false则停用状态地图类型控件
        mapTypeControl: true,

        //地图类型控件参数
        mapTypeControlOptions: {
            mapTypeIds: [
                qq.maps.MapTypeId.ROADMAP,
                qq.maps.MapTypeId.HYBRID,
                qq.maps.MapTypeId.SATELLITE
            ],
            position: qq.maps.ControlPosition.TOP_RIGHT
        },

        //地图平移控件，若为false则不显示平移控件
        panControl: true,

        //地图平移控件参数
        panControlOptions: {
            position: qq.maps.ControlPosition.TOP_LEFT
        },

        //地图缩放控件，若为false则不显示缩放控件
        zoomControl: true,

        //地图缩放控件参数
        zoomControlOptions: {
            position: qq.maps.ControlPosition.TOP_LEFT
        },

        //地图比例尺控件，若为false则不显示比例尺控件
        scaleControl: true,

        //地图比例尺控件参数
        scaleControlOptions: {
            position: qq.maps.ControlPosition.BOTTOM_RIGHT
        }

    });
}

JavaScript+HTML

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>腾讯地图-地图参数使用示例</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
        }
        body,
        button,
        input,
        select,
        textarea {
            font: 12px/22px Verdana, Helvetica, Arial, sans-serif;
        }
        html,
        body {
            height: 100%;
            margin: 0px;
            padding: 0px;
        }
        #container {
            width: 100%;
            height: 100%
        }
    </style>
</head>

<body onload="init()">
    <div id="container"></div>
    <script type="text/javascript">
        function init() {
            var sw = new qq.maps.LatLng(39.96693, 116.49369); //西南角坐标
            var ne = new qq.maps.LatLng(39.88795, 116.28666); //东北角坐标
            var map = new qq.maps.Map(document.getElementById("container"), {
                // 地图的中心地理坐标。
                center: new qq.maps.LatLng(39.916527, 116.397128),

                //初始化地图缩放级别
                zoom: 12,

                //如果为 true，在初始化地图时不会清除地图容器内的内容
                noClear: true,

                //用作地图 div 的背景颜色。当用户进行平移时，如果尚未载入图块，则显示此颜色。
                //仅在地图初始化时，才能设置此选项
                backgroundColor: "#000000",

                //boundary规定了地图的边界，当拖拽超出限定的边界范围后，会自动移动回来
                //boundary:new qq.maps.LatLngBounds (ne, sw),

                //地图的默认鼠标指针样式
                draggableCursor: "crosshair",

                //拖动地图时的鼠标指针样式
                draggingCursor: "pointer",

                //地图类型ID
                mapTypeId: qq.maps.MapTypeId.SATELLITE,

                //地图样式ID，有效值为 style[编号]的形式
                mapStyleId: 'style3',

                //若为false则禁止拖拽
                draggable: true,

                //若为false则禁止滑轮滚动缩放
                scrollwheel: true,

                //若为true则禁止双击放大
                disableDoubleClickZoom: false,

                //若为false则禁止键盘控制地图
                keyboardShortcuts: true,

                //地图类型控件，若为false则停用状态地图类型控件
                mapTypeControl: true,

                //地图类型控件参数
                mapTypeControlOptions: {
                    mapTypeIds: [
                        qq.maps.MapTypeId.ROADMAP,
                        qq.maps.MapTypeId.HYBRID,
                        qq.maps.MapTypeId.SATELLITE
                    ],
                    position: qq.maps.ControlPosition.TOP_RIGHT
                },

                //地图平移控件，若为false则不显示平移控件
                panControl: true,

                //地图平移控件参数
                panControlOptions: {
                    position: qq.maps.ControlPosition.TOP_LEFT
                },

                //地图缩放控件，若为false则不显示缩放控件
                zoomControl: true,

                //地图缩放控件参数
                zoomControlOptions: {
                    position: qq.maps.ControlPosition.TOP_LEFT
                },

                //地图比例尺控件，若为false则不显示比例尺控件
                scaleControl: true,

                //地图比例尺控件参数
                scaleControlOptions: {
                    position: qq.maps.ControlPosition.BOTTOM_RIGHT
                }

            });
        }
    </script>
</body>

</html>

新窗口打开在线试一试