用过Arcgis Server for JavaScript API肯定知道InfoWIndow。你在用InfoWindow的时候会发现各种问题，比如不能全然显示的问题，遮盖对象的问题等等。所以呢我在实现这个功能的时候动了下脑子，想自己用div+css弄一个，倒腾了半天，弄出来了一个例如以下所看到的的：

做的比較丑陋，样式方面还得好好下下功夫。东西是差点儿相同实现了，以下说说思路：

首先。DIV定义，这个样式，我定义了5个div，各自是infowin，title，colse，content。arrow，当中。infowin是整个InfoWindow的大框架，title为标题。close为关闭button，content为主要内容，arrow为以下的小尾巴。我们能够将这个小尾巴做的长一点。以免对象被遮盖的情况，代码为：

  1.     <div id="mapDiv">
  2.     	<div id="infowin">
  3.         	<div id="close" onClick="closeInfoWin()">X</div>
  4.             <div id="title"></div>
  5.             <div id="content"></div>
  6.             <div id="arrow"></div>
  7.         </div>
  8.     </div>

定义了div就得进行布局。定义样式了，样式为：

  1.     <style>
  2.           html, body, #mapDiv
  3. 	  {
  4.                 padding:0;
  5.                 margin:0;
  6.                 height:100%;
  7. 		font-size:10px;
  8. 		position: relative;
  9.           }
  10. 	  #infowin
  11. 	  {
  12. 		  display:none;
  13. 		  z-index:10000;
  14. 	  }
  15. 	  #close
  16. 	  {
  17. 		  float:right;
  18. 		  padding-top:10px;
  19. 		  font-weight:bold;
  20. 		  font-size:12px;
  21. 		  color:#FFF;
  22. 		  border:#000 1px solid;
  23. 		  height:20px;
  24. 		  width:20px;
  25. 		  text-align:center;
  26. 	  }
  27. 	   #close:hover
  28. 	  {
  29. 		  cursor:pointer;
  30. 	  }
  31. 	  #title
  32. 	  {
  33. 		  background-color:#666;
  34. 		  padding:10px;
  35. 		  font-weight:bold;
  36. 		  font-size:12px;
  37. 	  }
  38. 	  #content
  39. 	  {
  40. 		  padding-left:10px;
  41. 		  padding-top:10px;
  42. 		  background-color:#999;
  43. 		  height:200px;
  44. 	  }
  45. 	  #arrow
  46. 	  {
  47. 		  background-image:url(arrow.png);
  48. 		  height:30px;
  49. 	  }
  50.     </style>

样式定义完之后就得考虑事件了，一般InfoWindow是在点击某个对象时弹出来的，所以我们得定义对象图层的click事件：

  1. 		function leftClick(evt){
  2. 			infowin.style.display="none";
  3.  
  4. 			var strtitle="城市名称"
  5. 		  	var strcontent = "****是一座漂亮的城市<br><br>****是一座好看的城市<br><br>****是一座富饶的城市<br><br>****是一座漂亮的城市";
  6.  
  7. 			infowin.style.left=(evt.clientX-width/2)+"px";
  8. 			infowin.style.top=(evt.clientY-height-50)+"px";
  9. 			infowin.style.position="absolute";
  10. 			infowin.style.width=width+"px";
  11. 			infowin.style.height=height+"px";
  12. 			infowin.style.display="block";
  13.  
  14. 			title.innerHTML = strtitle;
  15. 			content.innerHTML = strcontent;
  16.  
  17. 		}
  18. 		//鼠标单击
  19. 		featurelayercity.on("click", leftClick);

点击对象，在鼠标的点击位置出现。所以我们得将infowin的position样式设为absolute。并定义left和top分别为clientX和clientY，并将其display设置为block，将其显示，实现的具体代码例如以下：

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5.     <!--The viewport meta tag is used to improve the presentation and behavior of the samples
  6.       on iOS devices-->
  7.     <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  8.     <title>Feature Layer - display results as an InfoWindow onHover</title>
  9.  
  10.     <link rel="stylesheet" href="http://localhost/arcgis_js_api/library/3.8/3.8/js/dojo/dijit/themes/claro/claro.css">
  11. 	<link rel="stylesheet" href="http://localhost/arcgis_js_api/library/3.8/3.8/js/dojo/dijit/themes/tundra/tundra.css">
  12.     <link rel="stylesheet" href="http://localhost/arcgis_js_api/library/3.8/3.8/js/esri/css/esri.css">
  13. 	<style>
  14.       html, body, #mapDiv
  15. 	  {
  16.         padding:0;
  17.         margin:0;
  18.         height:100%;
  19. 		font-size:10px;
  20. 		position: relative;
  21.       }
  22. 	  #infowin
  23. 	  {
  24. 		  display:none;
  25. 		  z-index:10000;
  26. 	  }
  27. 	  #close
  28. 	  {
  29. 		  float:right;
  30. 		  padding-top:10px;
  31. 		  font-weight:bold;
  32. 		  font-size:12px;
  33. 		  color:#FFF;
  34. 		  border:#000 1px solid;
  35. 		  height:20px;
  36. 		  width:20px;
  37. 		  text-align:center;
  38. 	  }
  39. 	   #close:hover
  40. 	  {
  41. 		  cursor:pointer;
  42. 	  }
  43. 	  #title
  44. 	  {
  45. 		  background-color:#666;
  46. 		  padding:10px;
  47. 		  font-weight:bold;
  48. 		  font-size:12px;
  49. 	  }
  50. 	  #content
  51. 	  {
  52. 		  padding-left:10px;
  53. 		  padding-top:10px;
  54. 		  background-color:#999;
  55. 		  height:200px;
  56. 	  }
  57. 	  #arrow
  58. 	  {
  59. 		  background-image:url(arrow.png);
  60. 		  height:30px;
  61. 	  }
  62.     </style>
  63.     <script src="http://js.arcgis.com/3.9/"></script>
  64.     <script>
  65. 	  var infowin,colse,title,content;
  66.  
  67. 	  var width=400,height=230;
  68.  
  69. 	  var closeInfoWin = function (evt){
  70. 		  infowin=document.getElementById("infowin");
  71. 		  infowin.style.display="none";
  72. 	  };
  73.  
  74. 	  require([
  75.         "esri/map", //地图
  76. 		"esri/layers/ArcGISTiledMapServiceLayer",
  77. 		"esri/layers/FeatureLayer",//特征层
  78. 		"esri/symbols/PictureMarkerSymbol",//图片点符号
  79.         "esri/renderers/SimpleRenderer", //简单渲染
  80. 		"esri/graphic", //图片
  81. 		"esri/lang",
  82. 		"dojo/domReady!"
  83.       ], function(
  84.         Map,ArcGISTiledMapServiceLayer,FeatureLayer,PictureMarkerSymbol,SimpleRenderer,esriLang
  85.       ) {
  86.         var map = new Map("mapDiv", {
  87. 		  logo:false,
  88.           center: [106.6854, 35.8364],
  89.           zoom: 4,
  90.           slider: true
  91.         });	
  92.  
  93. 		var shpServiceURL="***************************************";
  94. 		var shpTitlelayer=new ArcGISTiledMapServiceLayer(shpServiceURL);
  95. 		map.addLayer(shpTitlelayer);
  96.  
  97. 		//--------------------------------------------------------------------------------------------------------
  98. 		var featurelayercity = new FeatureLayer("******************************************************", {
  99.           mode: FeatureLayer.MODE_SNAPSHOT,
  100.           outFields: ["*"]
  101.         });
  102. 	    var pmsRed = new PictureMarkerSymbol('../images/location_icon_blue.png', 20, 20).setOffset(0, 15);
  103. 		//简单渲染
  104. 		var sr=new SimpleRenderer(pmsRed);
  105. 		featurelayercity.setRenderer(sr);
  106.         map.addLayer(featurelayercity);	
  107.  
  108. 		infowin = document.getElementById("infowin");
  109. 	 	colse = document.getElementById("close");
  110. 	  	title = document.getElementById("title");
  111. 	  	content = document.getElementById("content");
  112. 		function leftClick(evt){
  113. 			infowin.style.display="none";
  114.  
  115. 			var strtitle="城市名称"
  116. 		  	var strcontent = "****是一座漂亮的城市<br><br>****是一座好看的城市<br><br>****是一座富饶的城市<br><br>****是一座漂亮的城市";
  117.  
  118. 			infowin.style.left=(evt.clientX-width/2)+"px";
  119. 			infowin.style.top=(evt.clientY-height-50)+"px";
  120. 			infowin.style.position="absolute";
  121. 			infowin.style.width=width+"px";
  122. 			infowin.style.height=height+"px";
  123. 			infowin.style.display="block";
  124.  
  125. 			title.innerHTML = strtitle;
  126. 			content.innerHTML = strcontent;
  127.  
  128. 		}
  129. 		//鼠标单击
  130. 		featurelayercity.on("click", leftClick);
  131.       });
  132.     </script>
  133.   </head>
  134.   <body class="tundra">
  135.     <div id="mapDiv">
  136.     	<div id="infowin">
  137.         	<div id="close" onClick="closeInfoWin()">X</div>
  138.             <div id="title"></div>
  139.             <div id="content"></div>
  140.             <div id="arrow"></div>
  141.         </div>
  142.     </div>
  143.   </body>
  144. </html>

眼下仅仅实现到了这儿， 还有下面问题待解决：1、地图拖动后infowin随着地图的联动。2、地图缩放后infowin随着地图的联动；3、内容不在可视范围时候的移动；4、样式。挺难看的。希望有人实现后共享下代码，造福全GISer。

lzugis

lzugis——Arcgis Server for JavaScript API之自己定义InfoWindow的更多相关文章

  1. lzugis——Arcgis Server for JavaScript API之POI

    POI(Point Of Interest),感兴趣点,其实呢,严格意义上说应该不是POI,但是单位就这样叫了,我也就这样叫了,其实现的功能大致是这样的:用过百度地图的朋友们都知道你在百度地图时,当鼠 ...

  2. lzugis——Arcgis Server for JavaScript API之自定义InfoWindow

    各位看到这个标题不要嫌烦,因为本人最近一直在研究相关的问题,所以相关文章也只能是这些,同时希望看过我的文章的朋友,我的文章能够给你帮助. 在前面的两篇相关的文章里面,实现InfoWindow是通过di ...

  3. lzugis——Arcgis Server for JavaScript API之自定义InfoWindow（续）

    同样的标题后面加了一个括弧,不是为了增减博文数量,而确实是上个功能的完善,标注为续,意思是继续上次的内容,来说说如何自定义InfoWindow. 在上一讲中,实现了InfoWindow的显示,但是并没 ...

  4. lzugis——Arcgis Server for JavaScript API在自己的定义InfoWindow

    你看到这个标题嫌烦.因为我最近一直与研究问题,相关文章使这些也可以只,同时要读我文章的朋友.我的文章能够给你带来帮助. 在相关的内部的前两篇文章,达到InfoWindow经div实现的东西,成Info ...

  5. Arcgis Server for JavaScript API之自定义InfoWindow

    各位看到这个标题不要嫌烦,因为本人最近一直在研究相关的问题,所以相关文章也只能是这些,同时希望看过我的文章的朋友,我的文章能够给你帮助. 在前面的两篇相关的文章里面,实现InfoWindow是通过di ...

  6. ArcGIS server开发之API for js 本地部署

    ArcGIS Server for javascript 本地部署 第一次使用arcgis server for js开发,在经验方面还有很多的不足,所以将自己在开发过程中遇到的问题写出来与大家共享. ...

  7. ArcGIS 10.2 JavaScript API本地部署离线开发环境

    1 获取ArcGIS JavaScript API API的下载地址http://support.esrichina.com.cn/2011/0223/960.html,在下载页面会看到api和sdk ...

  8. ArcGIS Server for JavaScript 3.3 的安装部署

    一.安装包下载 首先从官网下载ArcGIS API for JavaScript 3.3 的API和SDK,地址:http://support.esrichina.com.cn/2011/0223/9 ...

  9. How to CORS enable ArcGIS Server 10.2.1 to Access REST Services without Using proxy.ashx

    http://gis.stackexchange.com/questions/86206/how-to-cors-enable-arcgis-server-10-2-1-to-access-rest- ...

随机推荐

  1. Codeforces 718C 线段树+矩乘

    题意: 维护一个序列,支持两种操作:1.区间[l,r]的权值+x2.询问区间[l,r]的函数和,即∑fib(x)这里的函数即斐波那契函数数据范围:1≤n,q≤105 思路:一般求斐波那契函数的方法可以 ...

  2. Excel文件导入导出

    /**     * 导入Excel文件数据     *      * @param file 将要导入的Excel文件     * @param fileCheckKeyWord 用于判断导入文件是否 ...

  3. 如何卸载系统自带的Microsoft Office

    (1)首先.在C盘删除office文件夹. (2)删除注册表 1)开始菜单-->运行-->regedit进入注册表 (window+r  -->) 2)在注册表里找到HKEY_CUR ...

  4. Android Studio查看CPU使用率。

    进入AS自带的CMD,依次输入: (1)进入Android Atudio安卓的目录: 1.H: 2.cd AndroidStudio\sdk\platform-tools (2)adb shell ( ...

  5. web流行工具

    中小型公司: Node.js:现代工业化前端的基础: RequireJS:AMD规范, 即将过时的 JavaScript 模块化方案: Bower:前端模块源: npm:前端工具源,另一个潜在的前端模 ...

  6. 依存分析 Dependency Parsing

    依存分析 Dependency Parsing 句子成分依存分析主要分为两种:句法级别的和语义级别的 依存句法分析 syntactic dependency parsing 语义依存分词 semant ...

  7. [Windows Server 2012] 安装PHP+MySQL方法

    ★ 欢迎来到[护卫神·V课堂],网站地址:http://v.huweishen.com★ 护卫神·V课堂 是护卫神旗下专业提供服务器教学视频的网站,每周更新视频.★ 本节我们将带领大家:PHP+MyS ...

  8. 离线安装Selenium

    https://blog.csdn.net/poem_ruru/article/details/79032140

  9. @ResponseBody 返回中文乱码

    第一种解决方法:在@RequestMapping注解添加produces属性 @RequestMapping(value = "testPersonalValidtor.do",p ...

  10. .net 内嵌 GeckoWebBrowser (firefox) 核心浏览器

    引用nuget包: 注意:Geckofx45 nuget包必须是最后引用,否则初始化会出错 简单示例: using Gecko; using System; using System.Collecti ...