添加信息框

在地图上，信息框一般通过用户点击鼠标弹出，用于展示个性化的信息。 以iClient for JavaScript为例，弹窗类定义为SuperMap.Popup，其中的Anchored是固定锚点位置的浮动弹窗，可以围绕指定位置四周自适应显示，是最常用的信息框。

Step1 初始化地图

var map, layerWorld,marker,markers,
    url = "http://www.supermapol.com/iserver/services/vm3sbiax/rest/maps/World";
var value = "VZ88xbrMEMpGv4yiisTojgVq";
var name = "ak";
SuperMap.Credential.CREDENTIAL = new SuperMap.Credential(value, "ak");

function init(){
    //map上添加控件
    map = new SuperMap.Map("map",{controls: [
        new SuperMap.Control.ScaleLine(),
        new SuperMap.Control.Zoom(),
        new SuperMap.Control.LayerSwitcher(),
        new SuperMap.Control.Navigation({  //添加导航控件到map
            dragPanOptions: {
                enableKinetic: true    //拖拽动画
            }
        })]
                                                             });

    //定义layerWorld图层，获取图层服务地址
    layerWorld = new SuperMap.Layer.TiledDynamicRESTLayer("World", url);
}

Step2 定义mouseClickHandler函数

触发click事件会调用此函数，实现鼠标点击时将弹出框添加到地图上。

var infowin = null;
//定义mouseClickHandler函数，触发click事件会调用此函数
function mouseClickHandler(event){
    closeInfoWin();
    //初始化Anchored类
    popup = new SuperMap.Popup.Anchored(
        "chicken",
        marker.getLonLat(),
        new SuperMap.Size(220,140),
        '<img src="http://sandbox.runjs.cn/uploads/rs/3/dofmucai/xila.jpg">',
        icon,
        true,
        null
    );

    infowin = popup;
    //添加弹窗到map图层
    map.addPopup(popup);
}

Step3 定义addLayer函数

触发layerInitialized事件会调用此函数，把地图与Marker添加到地图窗口。

//定义addLayer函数，触发layerInitialized事件会调用此函数
function addLayer(){
    //map上添加分块动态REST图层和标记图层
    map.addLayers([layerWorld,markers]);
    map.setCenter(new SuperMap.LonLat(23, 38), 4);
}

Step4 定义addMarker函数

触发layerInitialized事件会调用此函数，初始化Marker，并注册 click 事件，用于触发mouseClickHandler()方法。

//定义addMarker函数，触发layerInitialized事件会调用此函数
function addMarker(){
    size = new SuperMap.Size(21,25);
    offset = new SuperMap.Pixel(-(size.w/2), -size.h);
    icon = new SuperMap.Icon('http://sandbox.runjs.cn/uploads/rs/3/dofmucai/markerbig_select.png', size, offset);
    //初始化标记覆盖物类
    marker = new SuperMap.Marker(new SuperMap.LonLat(23.6530190,37.9439259),icon);
    //添加覆盖物到标记图层
    markers.addMarker(marker);
    //注册 click 事件,触发 mouseClickHandler()方法
    marker.events.on({"click":mouseClickHandler,
                                        "touchstart":mouseClickHandler });
}

Step5 添加layerInitialized事件，实现添加图层和Marker到地图上

    //为图层初始化完毕添加layerInitialized事件
    layerWorld.events.on({"layerInitialized": addLayer});
    //初始化标记图层类
    markers = new SuperMap.Layer.Markers("Markers");

    layerWorld.events.on({"layerInitialized": addMarker});

在线演示与源码编辑

您可以在线访问完整代码、体验演示效果，也可以直接在线编辑源码并实时查看效果。

• 在线演示
• 源码编辑