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

实例

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

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

在线试一试

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

已解决

未解决