使用OpenLayers实现一个在鼠标点击处添加标记的效果

最新推荐文章于 2024-08-24 22:46:19 发布

weixin_30896763

最新推荐文章于 2024-08-24 22:46:19 发布

阅读量413

点赞数

文章标签：开发工具 java

原文链接：http://www.cnblogs.com/kaixin110/archive/2008/09/08/1286755.html

版权

Q:
我想用openlayer实现一个在鼠标点击处添加标记的效果，不知道哪里能找到这种例子，有用过的麻烦帮一下忙 .

A:本人也是最近在接触OpenLayers JS Framework,先把该问题的代码放置到这里，希望可以帮助更多的朋友,thx!

代码和规范性不是很好，请见谅，如果有什么不妥和错误，请指正！thx!

附加上OpenLayers的PPT

//点击一个标注按钮的事件,该方法的作用就是启用添加标注事件
var map_onclick;
function enable_click()
{
    map_onclick = new OpenLayers.Control.Click();
    map.addControl(map_onclick);
    map_onclick.activate();
}

//注册添加添加标注Handler
//注册添加标注Event
OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {
                defaultHandlerOptions:
                {
                    'single': true,
                    'double': false,
                    'pixelTolerance': 0,
                    'stopSingle': false,
                    'stopDouble': false
                },

                initialize: function(options)
                {
                    this.handlerOptions = OpenLayers.Util.extend({}, this.defaultHandlerOptions);
                    OpenLayers.Control.prototype.initialize.apply(this, arguments);
                    this.handler = new OpenLayers.Handler.Click(this, {'click': this.trigger}, this.handlerOptions);
                },

                trigger: function(e)
                {
                    var lonlat = this.map.getLonLatFromPixel(e.xy);//map.getLonLatFromViewPortPx(e.xy);
                    removeAll();
                    createMarker("<a href=' http://www.handandaily.com' target='_blank'>Visit China</a>",lonlat.lon,lonlat.lat,false);
                }
    });

function createMarker(html,lon,lat,isHide)
{
    var ll, popupClass, popupContentHTML;
    ll = new OpenLayers.LonLat(lon,lat);
    popupClass = AutoSizeFramedCloud;
    popupContentHTML = html;
    addMarker(ll, popupClass, popupContentHTML, true, false);
    setCenter(lon,lat);
}

function addMarker(ll, popupClass, html, closeBox, overflow)
{
    var feature = new OpenLayers.Feature(markers, ll);
    feature.closeBox = closeBox;
    feature.popupClass = popupClass;
    feature.data.popupContentHTML = html;
    feature.data.overflow = (overflow) ? "auto" : "hidden";

    var marker = feature.createMarker();
    marker.setUrl('img/marker1.png');   //ICON
    marker.display(true);

    var markerClick = function (evt)
    {
        if (this.popup == null)
        {
            this.popup = this.createPopup(this.closeBox);
            map.addPopup(this.popup);
            this.popup.show();
        }
        else
        {
            this.popup.toggle();
        }
        currentPopup = this.popup;
        OpenLayers.Event.stop(evt);
    };
    marker.events.register("mousedown", feature, markerClick);
    markers.addMarker(marker);
}

注释比较少，大家如果有任何问题可以直接联系我

转载于:https://www.cnblogs.com/kaixin110/archive/2008/09/08/1286755.html