添加链接
link管理
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接
通过详细文档可见 参考手册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); 通过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