3D / 2D 显示模式控制

JavascriptAPI GL提供2D和3D两种地图显示模式：
3D（默认）：地图可旋转、倾斜，通过ctrl+鼠标左键拖动，或使用API接口可任意控制地图视角；
2D：固定上北下南，不可旋转和倾斜，一般用于PC端基于地图的交互操作工具。

//创建map对象，初始化地图
var map = new TMap.Map('container', {
    center: new TMap.LatLng(39.984120,116.307484), //设置地图中心点坐标
    zoom:11,   //设置地图缩放级别
    viewMode:'2D'
});

查看示例

地图中心点的设置/获取

地图初始化时设置默认中心点：
通过详细文档可见参考手册MapOptions

示例中，设置了一个固定坐标作为初始化地图的显示位置，而一般实际应用中，会首先对用户进行定位，并默认显示其所在城市的地图，提升体验，在PC端可以通过WebServiceAPI的IP定位服务，在移动端通过H5定位组件，首先实现用户定位，再用定位坐标初始化地图显示。

//定义地图默认中心点坐标
var center=new TMap.LatLng(39.984120,116.307484)
//创建map对象，初始化地图
var map = new TMap.Map('container', {
    center: center,//设置地图中心点坐标
    zoom:11,   //设置地图缩放级别
});

查看示例

修改地图中心点：
通过调用setCenter方法可对地图中心点进行修改，示例中演示最基本用法，实际场景中可用于城市快速切换，也可为用户提供城市列表供选择（城市列表可通过WebServiceAPI行政区划服务，获取城市数据，然后根据您的实际交互需求进行开发）

var map = new TMap.Map('container', { //初始化地图
    center: new TMap.LatLng(39.984120,116.307484),  //设置地图初始中心点
    zoom:11,   //设置地图缩放级别
});
//修改地图中心点
map.setCenter(new TMap.LatLng(lat,lng));

查看示例

获取地图中心点：
通过调用getCenter方法可获取地图中心点坐标，示例如下：

var map = new TMap.Map('container', { //初始化地图
    center: new TMap.LatLng(39.984120,116.307484),  //设置地图初始中心点
    zoom:11,   //设置地图缩放级别
});
//修改地图中心点
var centerLatLng=map.getCenter();

查看示例

在社交发送位置或地图选点应用中，一般会在地图中心点放置一个图标，示意要选取的位置，当地图被用户拖动后，通过getCenter方法取得中心点坐标，并调用逆地址解析服务获取周边地点，便于用户点选，当在用户确认后，同样调用getCenter获取中心点坐标，完成位置选择。
应用场景示意：

点击拾取坐标（地图事件）

事件绑定：
       地图实例被创建后，通过on(eventName:String, listener:Function)添加各类交互事件，参数eventName为事件名称，listener为事件的处理方法。
       以下示例，演示了点击地图后，获取点击位置坐标并在console输出。事件处理方法会收到MapEvent对象规范，其中会包含触发事件的坐标位置、事件的目标对象等关键信息，供事件处理方法使用。
       腾讯位置服务所提供的坐标拾取器（点击拾取坐标的交互效果），就是基于点击事件实现的

//定义事件处理方法
var clickHandler=function(evt){
    var lat = evt.latLng.getLat().toFixed(6);
    var lng = evt.latLng.getLng().toFixed(6);
    console.log("您点击的的坐标是："+ lat + "," + lng);
}
//Map实例创建后，通过on方法绑定点击事件
map.on("click",clickHandler)

查看示例

解除事件绑定：
通过off(eventName:String, listener:Function)可对已绑定事件进行解绑，参数eventName为要解绑事件名称，listener为要解绑的事件处理方法。 注意：所绑定的事件处理方法不能是匿名方法，否则无法解绑

//定义事件处理方法
var clickHandler=function(evt){alert("您点击了地图")}
 
//Map实例创建后，通过on方法绑定点击事件
map.on("click",clickHandler);
 
//通过off方法解绑点击事件
map.off("click",clickHandler);

地图显示范围的设置/获取

LatLngBounds对象，描述一个矩形的地理坐标范围，它由矩形西南角(左下) 和 东北角(右上)坐标构成

var bounds = new TMap.LatLngBounds(sw:LatLng, ne:LatLng)

       通过fitBounds(bounds:LatLngBounds, padding:Number)方法进行设置，它可让地图自动调整视野（center和zoom），把整个LatLngBounds完整显示在地图可视范围内。
       这个方法应用场景十分广泛，如：
       1. 进行周边搜索，将结果全部标记 Marker 在地图中，地图显示范围要正好将所有标记都合适的显示出来
       2. 通过起终点进行路线规划，将路线点串通过折线(Polyline敬请期待…)绘制到地图中，地图显示范围要正好将整条路线完整呈现出来
       3. 地图的拉框放大效果


计算LatLngBounds并设置显示范围
当您有一组坐标点，一条轨迹或路线点串，调用fitBounds前要计算其LatLngBounds范围： LatLngBounds.extend(latlng:LatLng)实现，示例：

//假设您有一组坐标点
var coords=[
     new TMap.LatLng(39.91474,116.37333),
     new TMap.LatLng(39.91447,116.39336),
     new TMap.LatLng(39.90884,116.41306)
]
//创建LatLngBounds实例
var latlngBounds = new TMap.LatLngBounds();
//将坐标逐一做为参数传入extend方法，latlngBounds会根据传入坐标自动扩展生成
for(var i = 0;i<coords.length; i++){
    latlngBounds.extend(coords[i]);  
}
//调用fitBounds自动调整地图显示范围
map.fitBounds(latlngBounds);

查看示例

隐藏底图文字（设置显示元素）

JavascriptAPI GL 的底图由多种元素叠加渲染形成，现可支持设置使用一个或多个元素来进行底图的渲染，从而满足您的个性化需求。
比如为了突出关键叠加层或覆盖物的展现，隐藏底图文字是比较常见的方法之一，请看以下示例：

//初始化地图
var map = new TMap.Map("container", {
	center: new TMap.LatLng(39.984104, 116.307503),//设置地图中心点坐标
	zoom:12,//设置地图缩放级别
	baseMap: {			//底图设置（参数为：VectorBaseMap对象）
	  type: 'vector',	//类型：失量底图
	  features: ['base', 'building2d']  
	  //仅渲染：道路及底面(base) + 2d建筑物(building2d)，以达到隐藏文字的效果
	}
});

查看示例   |  接口手册： baseMap， VectorBaseMap对象规范