OpenLayers学习笔记6——使用jQuery UI实现查询并标注（功能实现篇）

本篇博客接上篇是关于OpenLayers的地图标注及弹出窗（marker+popup），先来看下效果图：

下面给出代码，都写了注释，不做过多解释了：

///添加标记
function addMarke(x, y, attribute)
{

    //设置marker样式
    var style_mark = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
    style_mark.graphicWidth = 64;
    style_mark.graphicHeight = 64;
    style_mark.externalGraphic = "img/marker/tax.png";
    style_mark.fillOpacity = 0.5;
    style_mark.graphicOpacity = 1;
    /*
     style_mark.title = title;
     */
    //根据坐标点和样式创建一个矢量要素
    var point = new OpenLayers.Geometry.Point(x, y);
    var pointFeature = new OpenLayers.Feature.Vector(point, null, style_mark);
    pointFeature.attributes = attribute;

    //创建标注图层(矢量图层)
    if (markerLayer == null)
    {
        markerLayer = new OpenLayers.Layer.Vector("MarkeVector");
        map.addLayers([markerLayer]);
    }
    //将矢量要素添加至标注图层
    markerLayer.addFeatures([pointFeature]);

    //创建一个选择要素的控件（与marker绑定,从markerLayer图层中选择要素）
    if (selectControl == null)
    {
        selectControl = new OpenLayers.Control.SelectFeature(markerLayer,
            {
                hover: false,
                onSelect: onFeatureSelect,
                onUnselect: onFeatureUnselect
            });
        map.addControl(selectControl);
        selectControl.activate();

    }
}
//清除所有标记
function clearAllMarke()
{
    if (selectControl != null)
    {
        map.removeControl(selectControl);
        //销毁此对象
        selectControl.deactivate();
        selectControl = null;
    }
    if (markerLayer != null)
    {
        map.removeLayer(markerLayer);
        markerLayer = null;
    }
}

//创建popup显示的html
function createContentHTML(feature)
{
    var attr = feature.attributes;
    var contentHTML = "<div style='text-align: center;background-color: white'>";
    for (var b in attr)
    {
        contentHTML += b + ": " + "<textarea id='attributeValue' style='height 30px;font-size: 14px;text-align: center;vertical-align: middle;align-content: center'>" + attr[b] + "</textarea>" + "</br>";
    }

    return contentHTML + "</div>";

}

// Feature 选中事件响应
function onFeatureSelect(feature)
{

    selectedFeature = feature;
    var featureAttribute = feature.attributes;
    var popupContent = createContentHTML(feature);

    popup = new OpenLayers.Popup.CSSFramedCloud(
        null,                                          //Id
        feature.geometry.getBounds().getCenterLonLat(),//popup位置
        null,                                           //contentSize：popup内容大小
        popupContent,                                  //contentHTML：popup展示的内容，html字符
        null,
        true,                                          //closeBox：是否显示关闭按钮
        onPopupClose);                                 //closeBoxCallback：关闭按钮事件
    feature.popup = popup;
    map.addPopup(popup);

}
//关闭弹窗
function onPopupClose(evt)
{
    selectControl.unselect(selectedFeature);
}
// Feature取消选中事件响应
function onFeatureUnselect(feature)
{
    map.removePopup(feature.popup);
    feature.popup.destroy();
    feature.popup = null;
}

调用时代码：

 var lonlat = corTransform(120.48299, 36.1129);
    var lonLatStr = lonlat.toShortString();
    var lonLatArr = lonLatStr.split(",");
    var lon = lonLatArr[0];
    var lat = lonLatArr[1];
    var att = {
        名称: "山东省青岛第二中学",
        地址: "山东省青岛市崂山区松岭路70号",
        电话: "0532-88907255",
        类别: "教育学校:中学"

    };
    addMarke(lon, lat, att);

接下来需要实现的就是从数据库中查询数据批量的在地图上添加注记。本篇参考了博客：【openlayers】CSS3样式的Popups