浅谈Supermap iClient for JavaScript弹窗类

地图作为信息的载体和呈现方式，是GIS的重要组成部分，它是一个浏览信息的窗口，在信息日益发达的今天 ，各种地图应用如雨后春笋一般出现在大众眼前，而不是像以往一样太过局限于专业的领域。而弹窗，是作为地图信息的补充说明和描述的重要呈现方式，也广泛应用于各种地图应用中。一个好的前端界面的设计要灵活地使用空间，也要生动地完成与用户的交互，而在地图应用中，弹窗使用得好，不但会让人感觉舒适也会方便和增加与用户的交互，提升用户体验。如何使用和如何更好地使用iClient for JavaScript的弹窗（Popup）类，便是本文要探讨的话题。

具体的效果，我们来看看下面的效果：

弹窗类的使用很简单，new一个加到地图里就好了，这里以FramedCloud为例，上代码：

就这样？就这样。

弹窗基础的用法就是这样，弹窗内容的部分，你可以自由发挥，可以使用第三方插件，JQuery UI、BootStrap等等，你可以自由定制弹窗的内容。

一般我们怎么用？最常见的场景就是点击地图上的图标，以及其他可以注册点击事件的地方来添加弹窗。下面举个例子：

“点击点对象，显示弹窗”

这里使用SuperMap.Layer.Vector图层上的点对象（其他对象也一样），点对象怎么得到，怎么风格化处理就不多说了，我们来看看它需要什么参数：

首先，最重要的参数，定位点，它是SuperMap.LonLat类型的，所以我们得想办法得到所点击的点的坐标。SuperMap.Layer.Vector图层上要素的点击事件可以用SuperMap.Control.SelectFeature来注册，设置onSelect属性并且设置其repeat属性为true或者使用callbacks属性(JS API类参考可以看到支持的事件)来实现点击事件：

var selectFeature = new SuperMap.Control.SelectFeature(VectorLayer, {onSelect:
onFeatureSelect,repeat:true,selectStyle:style});
   
   
   

我们来看看点击（重复触发的选中事件）事件触发后，传给回调函数（function onFeatureSelect(e){}; //onSelect:{Function},当要素被选中时调用该方法，要求用户定义具体方法，该方法接收当前选中要素作为参数。）的参数里有没有我们想要的坐标参数，用console.log(e)看看：

虽然没有直接的lonlat对象，但可先用geometry.getBounds()方法获取Geometry对象的Bounds，再使用SuperMap.Bounds对象的Bounds.getCenterLonLat()方法获取其中心坐标点lonlat对象：

var lonlat= e.geometry.getBounds().getCenterLonLat();
   
   
   

有了定位点，接下来要怎么做就不用我多说了吧？这里再补充一下锚点属性的使用，它是用来定位弹窗相对于定位点位置用的，一般使用SuperMap.Icon对象，它不会在弹窗任何位置添加一个图标，使用它是因为不需要再构造一个包含大小信息和偏移量信息的对象，使用它可以使你的弹窗停靠在点图标图片的上方而不至于让小尾巴与图标重叠，效果对比如下↓：

 首先，收集必要信息：

   1. 我们已经知道弹窗的ID（new 弹窗时自己给的，也可以在浏览器里查看），要用要改变它的位置，只需要设置它样式的left和top值，怎么获取呢？ 

     2.看看popup对象除了是个div外，有没有在map对象里

先看看map控件下有什么属性和方法：

使用getLonLatFromPixel和getPixelFromLonLat方法就可以实现了，而且不需要计算地图容器在页面中的位置，不过这样改了后，弹窗对象的lonlat等属性不会变化，需要的话可以手动改下它的属性；

获取到popup对象，改它的lonlat属性，但是你会发现改了之后，弹窗并没有移动，因为你只是改了对象的属性，div并不受影响，除非刷新地图或重绘div。但是，还是有办法的，用SuperMap.Popup.updateSize()方法就可以了：