创建信息窗口

信息窗口,一般用于地点的摘要性信息的展示,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());//设置信息窗内容
})

查看示例

这篇文章对您解决问题是否有帮助?

已解决
未解决