创建信息窗口
信息窗口,一般用于地点的摘要性信息的展示,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());//设置信息窗内容
})
这篇文章对您解决问题是否有帮助?
已解决
未解决