supermap 学习系列（二）——添加标注（鼠标点击弹出窗口）

来源：互联网发布：网络投资服务产品收益编辑：程序博客网时间：2024/05/23 19:19
学习笔记，方便以后查询。
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title></title>    <script src="json_parse.js"></script>    <script src="toJSON.js"></script>    <script src="libs/SuperMap.Include.js"></script>    <script type="text/javascript">                   var map, layer, vectorLayer, control, selectFeature;        // 设置访问的GIS服务地址        var url = "http://localhost:8090/iserver/services/map-ChinaTestWorkPlace/rest/maps/ChinaTest";        function GetMap() {            // 创建地图对象            map = new SuperMap.Map("map");            //control = new SuperMap.Control.MousePosition();     //该控件显示鼠标移动时，所在点的地理坐标。            //map.addControl(control);  //添加控件            // 创建图层对象            layer = new SuperMap.Layer.TiledDynamicRESTLayer("World", url, { transparent: true, cacheEnabled: true }, { maxResolution: "auto" });            layer.events.on({ "layerInitialized": addLayer });                    }        // 加载图层        function addLayer() {            // 向Map添加图层            map.addLayer(layer);            map.setCenter(new SuperMap.LonLat(116.409749, 39.912344), 1);
            //添加大头针标记            var markerlayers = new SuperMap.Layer.Markers("Markers");            map.addLayer(markerlayers);            var marker = new SuperMap.Marker(new SuperMap.LonLat(116.409749, 39.912344));            markerlayers.addMarker(marker);
            //例如点击marker弹出popup            marker.events.on({                "mouseover": openInfoWin,                "mouseout": closeInfoWin,                "click": clickHandler,                "scope": marker   //   还不清楚这行代码是什么意思！  如果有大神赐教，我不甚感激！            });        }        var infowin = null;        function openInfoWin() {                       closeInfoWin();            var marker = this;                        var lonlat = marker.lonlat;            var contentHTML = "<div style='font-size:.8em; opacity: 0.8; overflow-y:hidden;'>";            contentHTML += "<div>Hello Word</div></div>";            var popup = new SuperMap.Popup.FramedCloud("popwin",                new SuperMap.LonLat(lonlat.lon, lonlat.lat),                null,                contentHTML,                null,                true);            infowin = popup;            map.addPopup(popup);        }        function closeInfoWin() {                      if (infowin) {                try {                    infowin.hide();                    infowin.destroy();                }                catch (e) { }            }        }        function clickHandler() {            closeInfoWin();            var marker = this;            alert("Hello Word，我被点击了！");        }    </script></head><body onload="GetMap()">        <div id="map" style="height: 640px; width: 720px; border: 1px solid red; margin-left: auto; margin-right: auto;"></div></body></html>
效果图如下：
0 0