创建信息窗口

信息窗口，一般用于地点的摘要性信息的展示，Javascript API GL 提供了TMap.infoWindow类，用于实现这一功能
代码示例： var infoWindowLocation = new TMap.LatLng(39.984104,116.307503);//创建一个坐标 //创建InfoWindow实例，并进行初始化 var infowindow=new TMap.InfoWindow({ content:"My location", //信息窗口内容 position:infoWindowLocation,//显示信息窗口的坐标 map:map }); 查看示例

带有图文内容的信息窗口

var infoWindowLocation = new TMap.LatLng(39.984104,116.307503);//创建一个坐标 //创建InfoWindow实例，并进行初始化 var infoWindow = new TMap.InfoWindow({ map: map, position: center, //设置infoWindow，content支持直接传入html代码，以实现各类内容格式需求 content: "<div><img src='../img/em.jpg'><p>Hello World!</p></div>" });

查看示例

点击标记（marker）弹出信息窗口

信息窗口常被用在点标记(marker)被点击后，弹开信息窗口展示摘要信息，若多个marker被点击，也仅显示最后一个被点击的marker的信息窗口，示例如下： var container = document.getElementById("container"); var center = new TMap.LatLng(39.984104,116.307503);//设置中心点坐标 //初始化地图 var map = new TMap.Map(container, { center: center }); //初始marker var marker = new TMap.MultiMarker({ id: 'marker-layer', map: map, styles: { "marker": new TMap.MarkerStyle({ "width": 23, "height": 35, "anchor": { x: 12, y: 32 }, "src": '../img/marker.png' }) }, geometries: [{ "id": 'demo1', "styleId": 'marker', "position": new TMap.LatLng(39.984104,116.307503), "properties": { "title": "marker" } }, { "id": 'demo2', "styleId": 'marker', "position": new TMap.LatLng(39.974104,116.347503), "properties": { "title": "marker" }, }] }); //初始化infoWindow var infoWindow = new TMap.InfoWindow({ map: map, position: new TMap.LatLng(39.984104,116.307503), offset: { x: 0, y: -32 } //设置信息窗相对position偏移像素，为了使其显示在Marker的上方 }); infoWindow.close();//初始关闭信息窗关闭 //监听标注点击事件 marker.on("click", function (evt) { //设置infoWindow infoWindow.open(); //打开信息窗 infoWindow.setPosition(evt.geometry.position);//设置信息窗位置 infoWindow.setContent(evt.geometry.position.toString());//设置信息窗内容 })

查看示例