JavaScript API

qq.maps.Map 类

继承自MVCObject 类
API中的核心类，用来在网页中创建一个地图。

构造函数

创建Map类的语法:

new qq.maps.Map(mapContainer, options);

参数:
mapContainer : {HTMLDIVElement | string}
(必填) 地图容器，实例化一个地图对象需要在网页中创建一个空div元素，参数中需要传入div元素对象或div元素的id。

options : { MapOptions }
(可选) 地图参数，通过这个参数来控制初始化地图的中心点、缩放级别、地图类型、地图样式等等。

方法

方法	返回值	说明
fitBounds(bounds:LatLngBounds,padding)	none	LatLngBounds:根据指定的范围调整地图视野;padding(可选):可设置边距。
getBounds()	LatLngBounds	返回当前地图的视野范围。bounds属性是异步的，不能直接获得，第一次获取可以用bounds_changed事件来获取。
getCenter()	LatLng	返回地图当前中心点地理坐标。
getZoom()	Number	返回地图缩放级别。
getContainer()	HTMLDivElement	返回当前地图所在的 HTML 容器。
getMapTypeId()	MapTypeId	返回当前地图类型ID。
getProjection()	Projection	传回当前地图的投影对象。如果还未启动地图（即 mapType 仍为 Null），则结果为 Null。侦听 projection_changed 并确保其值不为 Null。
panBy(x:Number, y:Number)	none	将地图中心移动一段指定的距离（以像素为单位）。
zoomBy(deltaZoom:Number)	none	将地图缩放到当前的级别加上指定的数值后的级别。
panTo(latLng:LatLng)	none	将地图中心移动到指定的经纬度坐标。
zoomTo(zoom:Number)	none	将地图缩放到指定的级别。
setCenter(latLng:LatLng)	none	设置地图中心点坐标。
setZoom(zoom:Number)	none	设置地图缩放级别。
setMapTypeId(mapTypeId:MapTypeId)	none	设置地图类型ID。
setOptions(options:MapOptions)	none	设置地图参数。

属性

名称	类型	说明
controls	Array.<MVCArray.>	在地图上添加自定义控件。
mapTypes	MapTypeRegistry	通过Id注册MapType实例。
overlayMapTypes	MVCArray.<MapType>	添加用户自定义的叠加地图类型。

事件

事件名	参数	说明
click	event:MouseEvent	当用户点击地图（但不是点击标记或信息窗口）时会触发此事件。
dblclick	event:MouseEvent	当用户双击地图时会触发此事件。
rightclick	event:MouseEvent	鼠标右键点击地图时触发此事件。
mouseover	event:MouseEvent	当用户的鼠标进入地图容器时会触发此事件。
mouseout	event:MouseEvent	当用户的鼠标从地图容器上退出时会触发此事件。
mousemove	event:MouseEvent	用户的鼠标在地图容器上移动，触发此事件。
drag	none	当用户拖动地图时会反复触发此事件。
dragstart	none	当用户开始拖动地图时会触发此事件。
dragend	none	当用户停止拖动地图时会触发此事件。
longpress	event:MouseEvent	当用户长按地图时会触发此事件。
bounds_changed	none	当可视区域范围更改时会触发此事件。
center_changed	none	当地图中心属性更改时会触发此事件。
zoom_changed	none	当地图缩放级别更改时会触发此事件。
maptypeid_changed	none	当 mapTypeId 属性更改时会触发此事件。
projection_changed	none	当投影更改时会触发此事件。
idle	none	如果地图在平移或缩放之后变为闲置状态，则会触发此事件。
tilesloaded	none	当地图容器中可见的瓦片加载完后会触发此事件。
resize	none	当地图容器更改大小时，开发人员需主动触发此事件：qq.maps.event.trigger(map, ‘resize’)。

实例

例子 1：
本示例中，介绍如何在div容器中创建地图

<!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">
        html,
        body {
            height: 100%;
            margin: 0px;
            padding: 0px
        }
        #container {
            width: 100%;
            height: 100%
        }
    </style>
</head>
 
<body>
    <div id="container"></div>
    <script type="text/javascript">
        var map = new qq.maps.Map(document.getElementById("container"), {
            // 地图的中心地理坐标。
            center: new qq.maps.LatLng(39.916527, 116.397128)
        });
    </script>
</body>
 
</html>

在线试一试

例子 2：
本示例中，介绍如何异步加载api展现地图

<!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" />
    <style type="text/css">
        html,
        body {
            height: 100%;
            margin: 0px;
            padding: 0px
        }
        #container {
            width: 100%;
            height: 100%
        }
    </style>
</head>
 
<body onload="loadScript()">
    <div id="container"></div>
    <script>
        function init() {
            var myLatlng = new qq.maps.LatLng(39.916527, 116.397128);
            var myOptions = {
                zoom: 8,
                center: myLatlng
            };
            var map = new qq.maps.Map(document.getElementById("container"), myOptions);
        }
 
        function loadScript() {
            var script = document.createElement("script");
            script.type = "text/javascript";
            script.src = "https://map.qq.com/api/js?v=2.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&callback=init";
            document.body.appendChild(script);
        }
    </script>
</body>
 
</html>

在线试一试

例子 3：
本示例中，介绍了地图的一些方法及事件

<!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: 70%
        }
        body div {
            text-indent: 20px;
        }
    </style>
</head>
 
<body onload="init()">
    <div id="container"></div>
    <div>当3秒后，地图中心移动一段指定的距离，地图缩放到加上指定的数值后的缩放级别。</div>
    <div>当8秒后，将地图中心移动到指定的经纬度坐标，将地图缩放到指定的级别。</div>
    <div>当15秒后，设置地图中心，设置地图的缩放级别，设置地图的id。</div>
    <div>当30秒后，设置地图上禁用了键盘操作功能和鼠标操作功能。</div>
    <div></div>
    <div id="fitBoundsDiv"></div>
    <div id="centerDiv"></div>
    <div id="zoomDiv"></div>
    <div id="containerDiv"></div>
    <div id="mapTypeIdDiv"></div>
    <div id="projection"></div>
 
    <script type="text/javascript">
        function init() {
            var sw = new qq.maps.LatLng(39.88795, 116.28666); //西南角坐标
            var ne = new qq.maps.LatLng(39.96693, 116.49369);; //东北角坐标
            var latlngBounds = new qq.maps.LatLngBounds(sw ,ne); //矩形的地理坐标范围
 
            //div容器
            var container = document.getElementById("container");
            var centerDiv = document.getElementById("centerDiv");
            var zoomDiv = document.getElementById("zoomDiv");
            var fitBoundsDiv = document.getElementById("fitBoundsDiv");
            var containerDiv = document.getElementById("containerDiv");
            var mapTypeId = document.getElementById("mapTypeId");
 
 
            //初始化地图
            var map = new qq.maps.Map(container, {
                // 地图的中心地理坐标。
                center: new qq.maps.LatLng(39.916527, 116.397128),
                zoom: 13
            });
 
            //根据指定的范围调整地图视野。
            map.fitBounds(latlngBounds);
            //当可视区域范围更改时会触发此事件。返回当前地图的视野范围。
            qq.maps.event.addListener(map, 'bounds_changed', function() {
                fitBoundsDiv.innerHTML = "地图的可视范围为：" + map.getBounds();
            });
 
 
            //返回地图当前中心点地理坐标。
            centerDiv.innerHTML = "地图中心为：" + map.getCenter();
            //当地图中心属性更改时会触发此事件。
            qq.maps.event.addListener(map, 'center_changed', function() {
                centerDiv.innerHTML = "地图中心为：" + map.getCenter();
            });
 
 
            //返回地图缩放级别。
            zoomDiv.innerHTML = "地图缩放级别为：" + map.getZoom();
            //当地图缩放级别更改时会触发此事件。
            qq.maps.event.addListener(map, 'zoom_changed', function() {
                zoomDiv.innerHTML = "地图缩放级别为：" + map.getZoom();
            });
 
 
            //返回当前地图所在的 HTML 容器。
            containerDiv.innerHTML = "地图所在的 HTML 容器为：" + map.getContainer();
 
 
            //返回当前地图类型ID。
            mapTypeIdDiv.innerHTML = "地图类型ID为：" + map.getMapTypeId();
            //当 mapTypeId 属性更改时会触发此事件。
            qq.maps.event.addListener(map, 'maptypeid_changed', function() {
                mapTypeIdDiv.innerHTML = "地图类型ID为：" + map.getMapTypeId();
            });
 
 
            var times = 0;
            var oInterval = setInterval(function() {
 
                //panBy()将地图中心移动一段指定的距离（以像素为单位）。
                map.panBy(-100, 100);
 
                //zoomBy()将地图缩放到指定的缩放比例（每次所增加的数值）。
                map.zoomBy(5);
                times++;
                if (times >= 1) {
                    clearInterval(oInterval)
                }
            }, 3 * 1000);
 
 
            setTimeout(function() {
 
                //panTo()将地图中心移动到指定的经纬度坐标。
                map.panTo(new qq.maps.LatLng(39.9, 116.4));
 
                //zoomTo()将地图缩放到指定的级别。
                map.zoomTo(15);
 
            }, 8 * 1000);
 
 
            setTimeout(function() {
                //setCenter()设置地图中心点坐标。
                map.setCenter(new qq.maps.LatLng(30, 117));
 
                //setZoom()设置地图缩放级别。
                map.setZoom(6);
 
                //setMapTypeId()设置地图类型。
                map.setMapTypeId(qq.maps.MapTypeId.HYBRID);
 
            }, 15 * 1000);
 
 
            setTimeout(function() {
 
                //设置地图参数。
                map.setOptions({
                    keyboardShortcuts: false,
                    scrollwheel: false
                });
 
            }, 30 * 1000);
        }
    </script>
</body>
 
</html>

在线试一试

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

已解决

未解决