supermap鼠标移入移出坐标点显示信息框

代码可以直接用只不过要引入相应的js
进去下载相应的demo实例,找到相应的js
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title data-i18n="resources.title_markerLayerEvent"></title>
    <script type="text/javascript" include="bootstrap" src="js/include-web.js"></script>
 	<script type="text/javascript" exclude="iclient-classic" src="js/include-classic.js"></script>
 	<script type="text/javascript" src="http://iclient.supermap.io/web/libs/iclient8c/libs/SuperMap.Include.js"></script>
 	<script src="js/jquery-1.8.0.min.js" type="text/javascript" charset="utf-8"></script>
    <style type="text/css">
        #map {
            border: 1px solid #3473b7;
            height: 1000px;
            width: 1600px;
        }
    </style>
</head>
<body>
<div id="map"></div>

<script>
    var map, layer, markerlayer, marker,
        host = window.isLocal ? window.server : "http://support.supermap.com.cn:8090",
        url = new Array("http://116.136.138.4:53003/iserver/services/map-allzhbj_dt181125/rest/maps/GDB_Items@allzhbj_dt","http://116.136.138.4:53003/iserver/services/map-agscache-Layers2/rest/maps/Layers");
		
		//坐标点图片
		var size = new SuperMap.Size(44, 33);
        var offset = new SuperMap.Pixel(-(size.w / 2), -size.h);
        var icon = new SuperMap.Icon('img/marker.png', size, offset);	
        //实例化地图
        map = new SuperMap.Map("map", {
            controls: [
            	new SuperMap.Control.Zoom(),
            	new SuperMap.Control.Navigation(),
            ]
        });
        
        //添加图层
        layer = new SuperMap.Layer.TiledDynamicRESTLayer("World", url,{maxResolution:"auto"});
        layer.events.on({"layerInitialized": addLayer});
       //添加覆盖物图层
        var size = new SuperMap.Size(44, 33);
        var offset = new SuperMap.Pixel(-(size.w / 2), -size.h);
        var icon = new SuperMap.Icon('img/marker.png', size, offset);
        
        markerlayer = new SuperMap.Layer.Markers("markerLayer");
        marker = new SuperMap.Marker(new SuperMap.LonLat(105.97428970994,40.31281075825), icon);
        markerlayer.addMarker(marker);
        
        //给地图上的坐标点添加鼠标移入移出事件
        marker.events.on({
        	 "mouseover": mouseOverHandler,
        	 "mouseout":mouseOutHandler,
        });
        
        //用显示或者隐藏信息框
    var infowin = null;
    //鼠标移入事件
    function mouseOverHandler(event) {
        closeInfoWin();
         popup = new SuperMap.Popup.Anchored(
            "chicken",
            marker.getLonLat(),
            new SuperMap.Size(220, 140),
            '111',
            icon,
            true,
            null
        );
        infowin = popup;
        //添加弹窗到map图层
        map.addPopup(popup);
    }
    
    //鼠标移出事件
    function mouseOutHandler(event) {
         closeInfoWin();
        infowin = null;
    }
    //删除所有信息框
	//map.removeAllPopup();
	
	//用来进行信息框的显示隐藏
    function closeInfoWin() {
        if (infowin) {
            try {
                infowin.hide();
                infowin.destroy();
            }
            catch (e) {
            }
        }
    }

    function addLayer() {
        map.addLayers([layer, markerlayer]);
        //显示地图范围
        map.setCenter(new SuperMap.LonLat(109.790475133,39.5863176336),4);
    }
    

</script>

</body>
</html>
supermap鼠标移入移出坐标点显示信息框

猜你喜欢
