OpenLayers开发：弹出框

地图应用的一个重要特征就是它能够显示地理要素（对应于点、线、面等）的信息。通常的做法是点击某个要素的同时，获取该要素的相关信息，然后以弹出框的形式展现信息。下面以上一节的地标为例，点击地标的时候，打开弹出框（popup），显示地标的信息。

1. 创建HTML文件，引入OpenLayers开发包，插入地图div元素：

2. 创建地图实例对象，添加基础图层和相应控件。

3. 创建地标图层，并添加一个地标，为该地标注册一个click事件，在相应click事件的方法中打开弹出框。

//定义图标大小

var size = newOpenLayers.Size(44, 40);

//定义图标偏移

var offset = newOpenLayers.Pixel(-(size.w / 2), -size.h);

//定义图标

var icon = newOpenLayers.Icon(‘images/marker-gold.png’, size, offset);

//创建地标

var marker = new OpenLayers.Marker(newOpenLayers.LonLat(116.39, 39.91), icon);

 

//弹出框内容

var content =”<div><strong>This is apopup.</strong></div>”;

//为该地标注册click事件

marker.events.registerPriority(“click”,null, function(evt) {

//创建弹出框，并设置弹出框属性

varcurrentPopup = new OpenLayers.Popup.FramedCloud(

null,

newOpenLayers.LonLat(116.39, 39.91),

null,

content,

null,

false,

null);

currentPopup.panMapIfOutOfView= true;

currentPopup.minSize= new OpenLayers.Size(300, 200);

 

//添加弹出框至地图

map.addPopup(currentPopup);

});

 

//将创建的地标添加到地标图层

markers.addMarker(marker);

 

运行结果如下所示：

转载自：https://mtr-1.oss-cn-beijing.aliyuncs.com/qyblog/2019/04/46878485.jpg