Class:地图/Map - 腾讯地图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.<HTMLDivElement>>`	在地图上添加自定义控件。
`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容器中创建地图

JavaScript

var map = new qq.maps.Map(document.getElementById("container"), {
    // 地图的中心地理坐标。
    center: new qq.maps.LatLng(39.916527, 116.397128)
});

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">
        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展现地图

JavaScript

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);
}

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" />
    <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：

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

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);
}

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

新窗口打开在线试一试