SuperMap学习系列(二)——添加标注(鼠标点击弹出窗口)

2016-7-21 14:52:36 0人评论 329次浏览 分类:技术文章

学习笔记,方便以后查询。
[html] view plaincopy在CODE上查看代码片派生到我的代码片

  1. <p><!DOCTYPE html>  
  2. <html xmlns="<a target="_blank" href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>">  
  3. <head>  
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5.     <title></title>  
  6.     <script src="json_parse.js"></script>  
  7.     <script src="toJSON.js"></script>  
  8.     <script src="libs/SuperMap.Include.js"></script>  
  9.     <script type="text/javascript">             
  10.         var map, layer, vectorLayer, control, selectFeature;  
  11.         // 设置访问的GIS服务地址  
  12.         var url = "<a target="_blank" href="http://localhost:8090/iserver/services/map-ChinaTestWorkPlace/rest/maps/ChinaTest">http://localhost:8090/iserver/services/map-ChinaTestWorkPlace/rest/maps/ChinaTest</a>";  
  13.         function GetMap() {  
  14.             // 创建地图对象  
  15.             map = new SuperMap.Map("map");  
  16.             //control = new SuperMap.Control.MousePosition();     //该控件显示鼠标移动时,所在点的地理坐标。  
  17.             //map.addControl(control);  //添加控件  
  18.             // 创建图层对象  
  19.             layer = new SuperMap.Layer.TiledDynamicRESTLayer("World", url, { transparent: true, cacheEnabled: true }, { maxResolution: "auto" });  
  20.             layer.events.on({ "layerInitialized": addLayer });              
  21.         }  
  22.         // 加载图层  
  23.         function addLayer() {  
  24.             // 向Map添加图层  
  25.             map.addLayer(layer);  
  26.             map.setCenter(new SuperMap.LonLat(116.409749, 39.912344), 1);</p><p>            //添加大头针标记  
  27.             var markerlayers = new SuperMap.Layer.Markers("Markers");  
  28.             map.addLayer(markerlayers);  
  29.             var marker = new SuperMap.Marker(new SuperMap.LonLat(116.409749, 39.912344));  
  30.             markerlayers.addMarker(marker);</p><p>            //例如点击marker弹出popup  
  31.             marker.events.on({  
  32.                 "mouseover": openInfoWin,  
  33.                 "mouseout": closeInfoWin,  
  34.                 "click": clickHandler,  
  35.                 "scope": marker   //   还不清楚这行代码是什么意思!  如果有大神赐教,我不甚感激!  
  36.             });  
  37.         }  
  38.         var infowin = null;  
  39.         function openInfoWin() {             
  40.             closeInfoWin();  
  41.             var marker = this;              
  42.             var lonlat = marker.lonlat;  
  43.             var contentHTML = "<div style='font-size:.8em; opacity: 0.8; overflow-y:hidden;'>";  
  44.             contentHTML += "<div>Hello Word</div></div>";  
  45.             var popup = new SuperMap.Popup.FramedCloud("popwin",  
  46.                 new SuperMap.LonLat(lonlat.lon, lonlat.lat),  
  47.                 null,  
  48.                 contentHTML,  
  49.                 null,  
  50.                 true);  
  51.             infowin = popup;  
  52.             map.addPopup(popup);  
  53.         }  
  54.         function closeInfoWin() {            
  55.             if (infowin) {  
  56.                 try {  
  57.                     infowin.hide();  
  58.                     infowin.destroy();  
  59.                 }  
  60.                 catch (e) { }  
  61.             }  
  62.         }  
  63.         function clickHandler() {  
  64.             closeInfoWin();  
  65.             var marker = this;  
  66.             alert("Hello Word,我被点击了!");  
  67.         }  
  68.     </script>  
  69. </head>  
  70. <body onload="GetMap()">      
  71.     <div id="map" style="height: 640px; width: 720px; border: 1px solid red; margin-left: auto; margin-right: auto;"></div>  
  72. </body>  
  73. </html>  
  74. </p>  

效果图如下:

附件下载

相关资讯

  • 水经注地图发布服务中件间功能简介

    水经与水经注分别源于中国古代地理名著《水经》和《水经注》。《水经注》共四十卷,作者是北魏晚期的郦道元,因注《水经》而得名。《水经》一书约一万余字,《唐六典注》说其“引天下之水,百三十七”。

    2017-10-23 11:27:20
  • 微图App中如何切换普通标注和专业标注

    《微图App》是《水经微图》的移动端,是作为数据采集和数据云同步必不可少的应用,该APP支持在Android和iOS系统上运行,暂时仅推出了Andriod版,后续会推出iOS版。

    2017-10-20 10:59:52
  • Cesium开源三维地球离线地图发布源码示例功能

    Cesium开源三维地球离线地图发布源码提供了地图切换、查询定位、模型加载、专题图叠加显示和测量功能等,旨在为用户提供一个可以在Cesium快速加载离线地图或在线地图的解决方案,并提供技术支持。

    2017-10-17 11:56:37
  • OpenLayers API 离线地图发布源码示例功能

    OpenLayers API 离线地图发布源码提供了道路交通图的离线加载功能,矢量标注功能、矢量编辑功能和测量功能等,旨在为用户提供一个可以快速加载离线地图或在线地图的解决方案,并提供技术支持。

    2017-10-17 10:51:59

共有访客发表了评论 网友评论

验证码: 看不清楚?