OpenLayers>Marker>events(click/mousedown)【地图中标记的事件】

最新推荐文章于 2024-06-27 10:25:05 发布
最新推荐文章于 2024-06-27 10:25:05 发布
阅读量856 收藏
点赞数
分类专栏： OpenLayers 文章标签： OpenLayers Marker event
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iteye_11116/article/details/82540947
版权

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <base href="<%=basePath%>">

    

    <title>My JSP 'mark.jsp' starting page</title>

    

<meta http-equiv="pragma" content="no-cache">

<meta http-equiv="cache-control" content="no-cache">

<meta http-equiv="expires" content="0">    

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

<meta http-equiv="description" content="This is my page">

<!--

<link rel="stylesheet" type="text/css" href="styles.css">

-->

<link rel="stylesheet" href="<%=basePath%>/Script/theme/default/style.css" type="text/css">

    <link rel="stylesheet" href="<%=basePath%>/Style/style.css" type="text/css">

<script src="<%=basePath%>/Script/lib/OpenLayers.js"></script>

<script type="text/javascript">

var map,layer;

function closePopu(){

this.hide();

}

function init(){

map = new OpenLayers.Map('map');

            layer = new OpenLayers.Layer.WMS( "OpenLayers WMS", 

                "http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'} );

            map.addLayer(layer);

            

            var newlayer = new OpenLayers.Layer.Text( "text", { location:"<%=basePath%>Script/textfile.txt"} );

            map.addLayer(newlayer);

            

            //marker

            var markers = new OpenLayers.Layer.Markers( "Markers" );

            map.addLayer(markers);//将markers层添加到地图上

            var size = new OpenLayers.Size(21,25);

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

            var icon = new OpenLayers.Icon('http://www.openlayers.org/dev/img/marker.png',size,offset);

            markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(0,0),icon));

            

            

            //marker

            var halfIcon = new OpenLayers.Icon("<%=basePath%>images/50653941400a8.jpg",new OpenLayers.Size(100,100),offset);//  the icon for this marker

            halfIcon.setOpacity(0.6);

            var halflonlat = new OpenLayers.LonLat(0,45);// the position of this marker

            var halfMark = new OpenLayers.Marker(halflonlat,halfIcon);

            halfMark.events.register('click',halfMark,function(event){

            alert(halfMark.icon.size+" "+halfMark.icon.url+" lon:"+halfMark.lonlat.lon+" lat:"+halfMark.lonlat.lat);

            OpenLayers.Event.stop(event);

            });

            markers.addMarker(halfMark);

 

//marker

            marker = new OpenLayers.Marker(new OpenLayers.LonLat(90,10),icon.clone());

            marker.setOpacity(0.2);

            //marker.events.register('mousedown',new OpenLayers.LonLat(90,10), 

            //marker.events.register('mousedown',this, 

            marker.events.register('mousedown',marker, 

            function(evt) { 

            //alert(marker.icon.url+" lon:"+marker.lonlat.lon+" lat:"+marker.lonlat.lat); 

            popup = new OpenLayers.Popup.FramedCloud("chicken", 

                                     marker.lonlat,

                                     null,

                                     "<div style='font-size:.8em'>URL: " +marker.icon.url +"</div>",

                                     null, true, closePopu);

                                     OpenLayers.Event.stop(evt);

            map.addPopup(popup);

            });

            markers.addMarker(marker); 

           

            //控件

            map.addControls([

           new OpenLayers.Control.LayerSwitcher(),

           new OpenLayers.Control.MousePosition(),

           new OpenLayers.Control.PanZoomBar()

            ]);

            map.setCenter(new OpenLayers.LonLat(0,0),0); 

map.zoomToMaxExtent();

}

</script>

  </head>

  

  <body οnlοad="init();">

  <h3>这是我的第二个正式程序，终于自己写了二个程序了，真难，希望自己能渡过这个难关，最近压力很大</h3>

  <hr>

    <div id="map" class="smallmap"></div>

  </body>

</html>

 

iteye_11116
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
openlayers地图离线开发demo-添加marker
oliver666666的博客
12-01 665
openlayers离线地图开发
Openlayers 教程 22 - 介绍演示地图监听事件（单击双击、地图平移、地图缩放、鼠标悬浮等）
linzi19900517的博客
04-01 6245
地图中的监听事件，也是经常用的功能，一般用于点击获取坐标点，进而查询数据，还有其他事件，比如双击事件、缩放事件等。
VUE集成高德地图自定义Marker图标及事件
wujize的博客
05-04 1万+
在项目中需要利用Marker对地图位置进行自定义标记，想使用自己的图标，并在点击Marker时需要弹出框显示对象信息，并且做后续自定义的操作。 高德地图上自定义单位Marker有介绍，但自定义多个使用的方法不是一样，并且直接用vue的el组件生成Marker后续操作时多个Marker传递marker的序号有问题，导致信息窗口显示不正常。这个坑到处找资料，花了整整2天才全部搞定。 一、需求 根据用户...
openlayer 图层点击事件 鼠标单击
最新发布
在职可交流前端开发，包括：web端、uniapp等，欢迎指教。
06-27 1238
一个图层创建好了，接下来我们要做的是，如何通过鼠标点击打开点击对象的详情弹框？详情弹框做点击按钮效果。
OpenLayers项目分析[转]（十）：OpenLayers事件机制分析
地理信息，无处不在
05-08 2956
（十）OpenLayers事件机制分析为了让更多的人看到这篇好文章，我把它转载到这里，这篇文章转载自http://www.3snews.net/html/24/10624-17589.html，原文作者如觉得不妥，可联系我删除之。　　OpenLayers中的事件封装是其一大亮点，非常值得学习。说到事件机制，在宏观上不得不涉及控件OpenLayers.Control类、OpenLayers.
Openlayers进阶学习——多标注显示/点击弹出框/图层控制/搜索定位/新增标注等
热门推荐
技术学习与分享
02-27 4万+
Openlayers进阶学习——多标注显示/点击弹出框/图层控制/搜索定位/新增标注等
VUE-amap遇到的坑和总结
weixin_45432736的博客
12-12 8274
和公司前辈做的第一个项目，我们都没有使用过vue-amap，期间遇到了各种问题，上网搜索发现有些方案不满足需求，或者根本没有对应的解决方案，又或是有些地方有些坑。项目接近尾声，想写个博客一来总结经验，二来希望能给其他通过vue-amap做项目的人提供一些帮助，毕竟当初自己也是疯狂上百度搜索资料来解决问题。东西比较零碎，第一次写博客，不足之处望海涵。
openlayers-map-marker:使用openlayers地图创建标记。 带有弹出窗口，地图多边形，地图事件的地图标记
05-24
具有Openlayers 6.3的地图标记 使用openlayers地图创建标记，使用弹出窗口创建简单的地图标记。 地图html < head > < link rel =" stylesheet " href =" ...
openlayers加载瓦片地图并手动标记坐标点
04-29
OpenLayers 是一个强大的开源JavaScript库，用于在Web浏览器中创建交互式地图应用。它支持多种数据源，包括瓦片地图，使得开发者可以轻松地将地理信息集成到网站中。本教程将详细介绍如何使用OpenLayers加载瓦片地图...
openlayers实现本地图片作为背景，添加marker标记
06-09
在这个例子中，我们将讨论如何利用OpenLayers将本地图片作为地图背景，并添加marker标记。 首先，为了将本地图片用作背景，我们需要创建一个OpenLayers的图层实例。这通常通过`ol.source.ImageStatic`类来实现。你...
ol(openlayers)加载天地图/加载中xyz格式瓦片/加载Geoserver发布的WMS图层
10-24
ol(openlayers)加载天地图/加载中xyz格式瓦片/加载Geoserver发布的WMS图层， 可以一次性加载多个图层： /** * 添加离线图层(数组) * @param {Array} optsArray 选项 * @example * var opts = [{ * url: "ol....
在地图上添加一个marker（标记），并注册事件
天下有雪的专栏
11-13 5628
 1.先创建一个marker的容器图层：  var markers=new OpenLayers.Layer.Markers("markers");  2.创建一个特征要素： var feature= new OpenLayers.Feature(markers,ll); markers：承载特征的图层 ll：特征的坐标  3.根据feature创建一个marker
高德地图上添加marker，给每个marker添加点击事件。
hhn_hn的博客
08-06 2万+
高德地图上添加marker，给每个marker添加点击事件。 高德地图上添加marker，给每个marker添加点击事件。 var watch = [] $.ajax({ type: 'GET', dataType: 'jsonp', url: url + '你的url地址', error: function(...
百度地图API入门4-常用代码
混沌的博客
09-24 1169
1.初始化地图,设置中心点坐标和地图级别 map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); 2.设置地图显示的城市 map.setCurrentCity("成都"); 3.开启鼠标滚轮缩放 map.enableScrollWheelZoom(true); 添加地图类型控件 map.addControl(new BMap.MapTypeControl({ mapTypes:[ BMAP_N
OpenLayers3入门篇-单击事件
Adventure_xph的博客
07-25 1万+
单击事件的绑定 第一步：var selectClick = new ol.interaction.Select({ condition: ol.events.condition.click, style:changeStyle }); 首先创建一个ol.interaction.Select对象,然后指定相应的参数，condition是事件类型，style是时间发生时相应的对象改变的Styl
使用OpenLayers实现一个在鼠标点击处添加标记的效果
pandary的专栏
01-30 2229
//点击一个标注按钮的事件,该方法的作用就是启用添加标注事件 var map_onclick; function enable_click() {     map_onclick = new OpenLayers.Control.Click();        map.addControl(map_onclick);        map_onclick.activate();
OpenLayers集成GeoServer
大强博客
10-22 391
1、代码Gis.vue <template> <div> <div id="toolbar" style="display: none;"> <ul> <li> <a>WMS version:</a> <select id="wmsVersionSelector" onchange="setWMSVersion(value)">
五、OpenLayer点击查询
qq_39330397的博客
08-21 589
这种矢量图层属性信息是直接存储在前端的canvas里面的，我们可以直接获取到它，前提是你在添加要素时已经动态给他赋值上（properties属性，上一节图层介绍有注释）或者添加的geojson格式对象的数据，否则点击获取的也是空对象。这种是栅格图层，理解为就是图片，属性信息是没有存储在前端的。比如arcgis server, 超图的iserver，都提供了空间查询的服务接口，需要自行去拼接参数请求获取对应数据。这块其实要分多种类型，因为不同图层和服务获取属性信息的方式和地址也不一样。
关于Openlayers中自定义鼠标的移出事件
longlongzuo的博客
12-03 5566
才来新公司没几天，公司是做WebGis开发的，我自己是学的Java后台开发，来这里之后自学了OpenLayers，在遇到自定义事件的时候，发现只有鼠标移入的自定义事件。 比如下面这样，之前的黄色的圆下面是红色的圆，鼠标放进去之后是编程绿色的圆，这里用的是鼠标移入的自定义事件，但是鼠标移出之后再变回原来的事件却没有。![鼠标放进去的时候圆变成绿色](https://img-blog.csdnimg....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值