Class:地图/Map - 腾讯地图API

Map

API中的核心类，用于创建地图实例

构造函数

创建Map类的语法:

new TMap.Map(domId, options);

参数:

domId : {string}: (必填) 地图DOM容器的id，创建地图需要在页面中创建一个空div元素，传入该div元素的id
options : {MapOptions}: 地图参数，对象规范详见MapOptions

方法

方法	返回值	说明
`setCenter(center:LatLng)`	`this`	设置地图中心点。
`setZoom(zoom:Number)`	`this`	设置地图缩放级别。
`setRotation(rotation:Number)`	`this`	设置地图水平面上的旋转角度。
`setPitch(pitch:Number)`	`this`	设置地图俯仰角。
`setScale(scale:Number)`	`this`	设置地图显示比例。
`setOffset(offset: Object)`	`this`	设置地图与容器偏移量，Object的格式为{x:Number, y:Number}，x方向向右偏移为正值，y方向向下偏移为正值。
`setDraggable(draggable:Boolean)`	`this`	设置地图是否支持拖拽。
`setScrollable(scrollable:Boolean)`	`this`	设置地图是否支持滚轮缩放。
`setDoubleClickZoom(doubleClickZoom: Boolean)`	`this`	设置地图是否支持双击缩放
`setBoundary(boundary:LatLngBounds)`	`this`	设置地图限制边界，拖拽、缩放等操作无法将地图移动至边界外
`setViewMode(viewMode: String)`	`this`	设置地图视图模式
`setBaseMap(baseMap:BaseMap \| BaseMap[])`	`this`	动态设置地图底图，BaseMap目前支持矢量底图（VectorBaseMap）、卫星底图（SatelliteBaseMap）、路况底图（TrafficBaseMap），可以使用数组形式实现多种底图叠加。
`setMapStyleId(mapStyleId: String)`	`this`	动态设置个性化地图样式
`panTo(latLng:LatLng, opts:EaseOptions)`	`this`	将地图中心平滑移动到指定的经纬度坐标。
`zoomTo(zoom:Number, opts:EaseOptions)`	`this`	平滑缩放到指定级别
`rotateTo(rotation:Number, opts:EaseOptions)`	`this`	平滑旋转到指定角度
`pitchTo(pitch:Number, opts:EaseOptions)`	`this`	平滑变化到指定俯仰角度
`easeTo(mapStatus:Object, opts:EaseOptions)`	`this`	平滑过渡到指定状态，mapStatus为key-value格式，可以设定center、zoom、rotation、pitch。
`fitBounds(bounds:LatLngBounds,options:FitBoundsOptions)`	`this`	根据指定的地理范围调整地图视野
`getCenter()`	`LatLng`	获取地图中心。
`getZoom()`	`Number`	获取地图缩放级别。
`getRotation()`	`Number`	获取地图水平面上的旋转角度。
`getPitch()`	`Number`	获取地图俯仰角度。
`getBounds()`	`LatLngBounds`	返回当前地图的视野范围，该视野范围实际会大于等于地图的可视区域范围，尤其是当地图发生旋转和俯仰变化时，得到的是一个当前视野范围的最小外包矩形。
`getScale()`	`Number`	获取地图显示比例。
`getOffset()`	`Object`	获取地图与容器的偏移量Object的格式为 {x:Number, y:Number}，x方向向右偏移为正值，y方向向下偏移为正值。
`getDraggable()`	`Boolean`	获取地图是否支持拖拽。
`getScrollable()`	`Boolean`	获取地图是否支持滚轮缩放。
`getDoubleClickZoom()`	`Boolean`	获取地图是否支持双击缩放
`getBoundary()`	`LatLngBounds`	获取地图限制边界
`addControl(control:Control)`	`this`	添加控件到地图,传入控件对象
`removeControl(id: String)`	`this`	从地图容器移出控件,默认控件的id列表参考 DEFAULT_CONTROL_ID
`getControl(id: String)`	`Control`	根据控件id获取对应的控件对象,默认控件的id列表参考DEFAULT_CONTROL_ID
`getViewMode()`	`String`	获取地图视图模式
`getBaseMap()`	`BaseMap \| BaseMap[]`	获取当前的底图类型
`getIndoorManager()`	`IndoorManager`	获取室内地图管理器
`destroy()`		销毁地图
`projectToContainer(latLng: LatLng)`	`Point`	经纬度坐标转换为容器像素坐标，容器像素坐标系以地图容器左上角点为原点
`unprojectFromContainer(pixel: Point)`	`LatLng`	容器像素坐标转换为经纬度坐标
`on(eventName:String, listener:Function)`	`this`	添加listener到eventName事件的监听器数组中。
`off(eventName:String, listener:Function)`	`this`	从eventName事件的监听器数组中移除指定的listener。

事件

事件名	参数	说明
`idle`	`none`	地图进入空闲状态时触发。
`tilesloaded`	`none`	当地图容器中可见的瓦片加载完后会触发此事件。
`click`	`evt:MapEvent`	鼠标左键单击地图时触发，移动与桌面web都触发。
`dblclick`	`evt:MapEvent`	鼠标左键双击地图时触发，移动与桌面web都触发。
`mousedown`	`evt:MapEvent`	鼠标在地图区域中左键按下时触发，只在桌面浏览器中触发。
`mouseup`	`evt:MapEvent`	鼠标在地图区域中左键按下又弹起时触发，只在桌面浏览器中触发。
`mousemove`	`evt:MapEvent`	鼠标在地图上移动时触发，只在桌面浏览器中触发。
`touchstart`	`evt:MapEvent`	在地图区域触摸开始时触发，只在移动浏览器中触发。
`touchmove`	`evt:MapEvent`	在地图区域触摸移动时触发，只在移动浏览器中触发。
`touchend`	`evt:MapEvent`	在地图区域触摸结束时触发，只在移动浏览器中触发。
`dragstart`	`none`	地图开始发生拖拽交互时触发。
`drag`	`none`	地图发生拖拽交互时触发，拖拽交互可能产生pan，rotate, picth事件。
`dragend`	`none`	地图拖拽交互结束时触发。
`panstart`	`none`	地图开始平移时触发。
`pan`	`none`	地图移动时触发。
`panend`	`none`	地图平移结束时触发。
`rotatestart`	`none`	地图开始旋转时触发。
`rotate`	`none`	地图旋转时触发。
`rotateend`	`none`	地图旋转结束时触发。
`pitchstart`	`none`	地图开始发生俯仰角变化时触发。
`pitch`	`none`	地图俯仰角变化时触发。
`pitchend`	`none`	地图俯仰角变化结束时触发。
`zoom`	`none`	地图缩放时触发。
`resize`	`none`	地图容器大小发生变化时触发
`center_changed`	`none`	当地图中心点变化时会触发此事件。
`bounds_changed`	`none`	当可视区域范围更改时会触发此事件。
`scale_changed`	`none`	地图显示比例变化时触发此事件。
`control_added`	`none`	给map添加控件的时候触发此事件。
`control_removed`	`none`	从map移出控件的时候触发此事件。

实例

例子 1：

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

JavaScript

function initMap() {
    var container = document.getElementById("container");
    var center = new TMap.LatLng(39.984104, 116.307503);
    //初始化地图
    var map = new TMap.Map(container, {
        rotation: 20,//设置地图旋转角度
        pitch:30, //设置俯仰角度（0~45）
        zoom:12,//设置地图缩放级别
        center: center//设置地图中心点坐标
    });
}

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/gljs?v=1.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 onload="initMap()">
    <div id="container"></div>
    <script type="text/javascript">
    function initMap() {
        var container = document.getElementById("container");
        var center = new TMap.LatLng(39.984104, 116.307503);
        //初始化地图
        var map = new TMap.Map(container, {
            rotation: 20,//设置地图旋转角度
            pitch:30, //设置俯仰角度（0~45）
            zoom:12,//设置地图缩放级别
            center: center//设置地图中心点坐标
        });
    }
    </script>
</body>

</html>

新窗口打开在线试一试

例子 2：

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

JavaScript

function initMap() {
    var map = new TMap.Map("container", {
        pitch:45,
        zoom:12,
        center: new TMap.LatLng(39.984104, 116.307503)
    });
}
function loadScript() {
    //创建script标签，并设置src属性添加到body中
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&callback=init";
    document.body.appendChild(script);
}
window.onload = loadScript;

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>
    <div id="container"></div>
    <script>
    function initMap() {
        var map = new TMap.Map("container", {
            pitch:45,
            zoom:12,
            center: new TMap.LatLng(39.984104, 116.307503)
        });
    }
    function loadScript() {
        //创建script标签，并设置src属性添加到body中
        var script = document.createElement("script");
        script.type = "text/javascript";
        script.src = "https://jsapi_v3.sparta.html5.qq.com/api/gljs?v=3&key=6LLBZ-QMLCX-HNA4L-T3ADN-4O3V5-BFFLB&callback=init";
        document.body.appendChild(script);
    }
    window.onload = loadScript;
    </script>
</body>

</html>

新窗口打开在线试一试