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 比例尺控件的初始化参数。

实例

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

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

在线试一试

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

已解决
未解决