`

鼠标点击添加标记

阅读更多

//点击一个标注按钮的事件,该方法的作用就是启用添加标注事件

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);

}

 

分享到:
评论
1 楼 Hu_Angel 2013-12-24  
博主,能不能鼠标点击添加标记的完整代码,初学openlayer,不是很熟,谢谢,发我邮箱也可以。谢谢。hu_1005@126.com

相关推荐

    Cesium画点线添加标注和描述

    Cesium画点线,添加标注,添加后弹窗输入描述等。。。

    vue+esri 山东天地图加载、标注、鼠标移入移除浮层显示隐藏

    批量添加标注点; 鼠标移入移除标注点,浮层显示隐藏功能; 点击标注点方法实现; 地图放大缩小、平移事件; 天地图样式 &lt;link rel="stylesheet" href="https://js.arcgis.com/3.30/esri/css/esri.css"/&gt;

    鼠标右键,键盘控制左右移动echarts标记线、标记点

    鼠标右键功能,键盘控制echarts添加标记线、标记点,删除标记线、标记点,左右移动标记点、标记线

    类似百度地图的静态图标注,图层上根据鼠标点击创建小图层

    自己写的静态地图标注取坐标,可以做围栏,原理是图层上根据鼠标点击创建小图层。放大缩小几级后可能坐标会有点偏离,至于加载point,还有轨迹你们自己写吧,这个不难。

    高德地图-标记点点击弹出气泡

    在高德地图中添加标记marker,点击marker时会弹出对应弹窗,也就是常说的气泡。

    Cesium 地图显示鼠标经纬度和高度

    基本版-显示鼠标经纬度和高度 html文件

    JavaScript添加marker并连线

    SuperMap iClient 6R for JavaScript 本实例演示了如何添加marker的点,线,面

    网蜂工具-坐标标注/ZBBZ 2.54

    8、在CAD中,用鼠标点击需要标记的位置即可 更新记录: 2.54 2018.08.13 1、添加编号修改功能 2、添加语言切换功能(简体中文/English/繁體中文) 3、修复每次运行后捕捉设置消失的BUG。 2.53 2015.03.04 ...

    一个非常好用的给文件添加注释说明的小工具

    我们经常会从网上下载各种各样的软件,觉得非常好特意保存在电脑中管理,但有时...主要功能是,会在鼠标右键添加一个菜单,点击菜单后,会自动生成并打开一个注释目标文件名+“.txt”的文本文件,供我们添加备注信息。

    VS 注释插件

    最近在项目开发中,发现组员对代码注释根本不当回事,...Fixed按钮:此按钮主要是为修改代码添加注释信息的,鼠标点击要插入的位置,点击此按钮即可; Function按钮:给函数添加注释,双击选中函数名之后再点击此按钮;

    [网蜂工具箱]坐标标注.rar

    操作方法: 1、下载解压,获得AutoCAD坐标插件zbbz.vlx文件; 2、将其放在软件安装目录...6、在CAD中,用鼠标点击需要标记的位置即可,图示如下。 如何查询编号.png 坐标标注插件动图 zbbz.gif

    vue2+three.js+blender(实现3d 模型引入并可点击效果)

    3d模型

    360全景漫游软件(krpano-GDI) v7.9.zip

    360全景漫游软件(krpano-GDI),基于...24. 场景事件,包括鼠标点击,鼠标经过,鼠标停留,鼠标离开,加载完,鼠标事件等 25. 鱼眼视角修改,最大视角修改,向北角度值修改! 360全景漫游软件(krpano-GDI)软件截图

    电子地图标注软件 v6.4.zip

    7.支持在地图上所选择的标注能点击查看详细信息。 8.支持添加地图标记,距离测量显示,地点名称显示。 9.支持保存您当前操作的文件,供日后打开再用,保证操作不会丢失。 10.支持全球地图操作预览。 11.支持添加...

    使用C#调用百度地图

    使用C#调用百度地图 程序实现功能: ...2、输入坐标、添加坐标按钮,可以将坐标值传入html文件...6、鼠标点击地图,可以在文本框内显示点击的坐标经纬度 7、点击开始实时显示按钮,鼠标在地图上移动,可以获得实时经纬度

    skyline悬浮按钮:iframe窗体内嵌html实现;popup页面实现标注添加

    BS页面实现Skyline平台下使用...实现popup内嵌html页面(标注输入界面),点击保存后更改标注图像,添加标注名称在鼠标悬浮在图像标注上显示名称的效果(最好把文件发布在iis上,要不然会在popup中弹出安全警告!)

    电子地图标注软件

    在添加地图标记,距离测量显示,地点名称显示。  6.地图上所选择的管道,部件等能点击查看详细信息。  7.谷歌在线(离线)混合地图,在软件界面上可以选择切换;  8.名称查询定位,可以输入地点名称后定位到所...

    热键点击 v1.0免费版

    为您提供热键点击下载,... 多坐标添加打勾,鼠标移到小圆圈(瞄准标记)处按下左键,鼠标移动到目标位置,松开鼠标左键,坐标就会添加到坐标框里了。按热键后,会根据延时按坐标添加顺序移动到每一个坐标并点击操作。

    高端百度地图开发:自定义覆盖物水滴头像(鼠标事件、API封装对接)

    你还可以通过设置事件监听器,为标注添加交互功能,例如点击、拖拽等。 自定义标注覆盖物可以用于展示地理位置、标记兴趣点、显示业务数据等场景,让地图内容更加丰富生动。无论是在网页还是移动应用中,通过使用...

    C#实现鼠标移动到曲线图上显示值的方法

    实现思路为,在该窗体上添加一个lable标签,当鼠标经过折线点时获取该点的x轴,y轴值和鼠标坐标值。然后将lable的坐标标记为鼠标所在坐标,并且给lable赋值,并且将lable显示出来。   具体实现代码如下: 代码...

Global site tag (gtag.js) - Google Analytics