`

openlayer 添加marker弹出窗口

    博客分类:
  • gis
 
阅读更多
var markers,marker,popup;
		var markArr=new Array();
		function addMarker(){
			
			/* var url = 'http://www.openlayers.org/dev/img/marker.png';
                var sz = new OpenLayers.Size(20, 20);  //尺寸大小
                var calculateOffset = function(size) {
                                    return new OpenLayers.Pixel(-(size.w/2), -size.h);
                                 };
                var icon = new OpenLayers.Icon(url, sz, null, calculateOffset);
				
				marker = new OpenLayers.Marker(new OpenLayers.LonLat(116.34851,33.22630), icon);*/
				if(popup!=null){
					 onPopupMouseDown(); //先移除掉
				 }
				 feature = new OpenLayers.Feature(tiled, new OpenLayers.LonLat(116.34851,33.22630));
//tiled 是增加的图层名称,OpenLayers.Layer.WMS的对象	
 				marker = feature.createMarker();
				  markers.addMarker(marker);

				marker.events.register("mousedown", marker, function(evt){
					 if (popup == null) {
						popup = new OpenLayers.Popup("click", 
												 new OpenLayers.LonLat(116.34851,33.22630),
												 new OpenLayers.Size(100,100),
												 "click me",
												 true);
						 popup.setBorder("#999999 solid 1px");
						 popup.closeOnMove = true;
						map.addPopup(popup);
					} else {
						popup.toggle();
					 }
					OpenLayers.Event.stop(evt);
				});
		}
		//移除Popup
		function onPopupMouseDown() {
            markers.map.removePopup(popup);
            popup.destroy();
            popup = null;
        } 
 

 

分享到:
评论

相关推荐

    openLayers geoserver常见问题

    5. OpenLayers的popup是弹出窗口组件,若其显示不正确,可能是因为图片读取错误或其他配置问题。 6. 使用OpenLayers进行字段标注不是在OpenLayers中直接完成,而是通过SLD(Styled Layer Descriptor)文件来定义,...

    LeafletAPI翻译

    Leaflet API 基于几个关键概念,包括地图(Map)、图层(Layer)、标记(Marker)、弹出窗口(Popup)、图层控制(Layer Control)和事件(Event Handling)等。 - **地图(Map)**:是Leaflet的核心,它是一个可视化的地理空间。...

    Openlayers绘制地图标注

    OpenLayers支持标注的交互性,可以监听鼠标事件,如点击或悬停,以触发特定的行为,如弹出信息窗口或执行其他操作。 6. **动态更新** 如果数据需要实时更新,比如显示移动的车辆或天气变化,你可以通过更改标注的...

    leafletjs测试用例

    - Leaflet.js提供`L.marker`来创建地图上的点标记,可以设置位置、图标和弹出窗口。例如: ``` var marker = L.marker([51.5, -0.09]).addTo(map); marker.bindPopup('A popup!').openPopup(); ``` 5. **路径...

    5.(leaflet篇)leaflet点采集与点编辑.zip

    可以添加交互式控件,如搜索框、弹出窗口等,让用户更方便地查找、编辑点信息。例如,使用Leaflet的InfoBox插件创建信息框,或者使用Geocoding服务搜索地址。 总之,“5.(leaflet篇)leaflet点采集与点编辑.zip”...

    Openlayers经典例子.doc

    通过OpenLayers提供的`Popup`功能,开发者能够轻松地在地图上添加交互式的弹出窗口。例如,在用户点击地图上的某个位置时,可以触发一个包含该地点相关信息的弹出窗口。 - **实现方式**:使用`Popup`类创建一个弹出...

    Openlayers实现点闪烁扩散效果

    Overlay是OpenLayers提供的一种机制,用于在地图上添加自定义的、可交互的元素,比如点、标记或者弹出窗口。它允许我们把DOM元素直接绑定到地图上的特定坐标。 创建一个闪烁扩散点的基本步骤如下: 1. **定义CSS...

    leaflet-challenge

    这个挑战可能是让你熟悉Leaflet的API,创建自己的地图功能,比如添加标记、图层、弹出窗口等。 首先,了解Leaflet的基本概念至关重要。Leaflet的核心是地图容器(Map),你可以通过它来设置地图的中心点、缩放级别...

    传单挑战

    它具有易用、高性能和丰富的API,使得添加地图标记、图层、地理JSON、弹出窗口等功能变得简单。 首先,你需要了解JavaScript基础,包括变量、函数、对象以及DOM操作。JavaScript是实现网页动态功能的关键,Leaflet...

    Google_map_JavaScript_API_V3

    与标记关联,当用户点击标记时,信息窗口会弹出。创建和管理信息窗口可以这样实现: ```javascript var infowindow = new google.maps.InfoWindow({ content: 'This is the place!' }); marker.addListener('...

    Leaflet.js-一个简单的例子

    你可以为标记添加弹出窗口,包含自定义内容: ```javascript marker.bindPopup('这是一个自定义标记').openPopup(); ``` 创建叠加菜单,可以使用`L.control.layers`,它允许用户动态添加或移除图层: ```javascript...

    传单实验室

    它提供了丰富的API和插件,使得添加标记、图层、弹出窗口、地理编码等功能变得简单易行。"传单实验室"可能包含了一系列示例、教程或者实验代码,用于教授如何利用Leaflet来创建和定制地图。 首先,Leaflet的基础...

    MapasLeaft:使用Js的地图

    - `L.marker`用于在地图上放置可拖动的点标记,可以自定义图标和弹出信息窗口。 4. **形状与路径**: - `L.polyline`和`L.polygon`用于绘制多边形线和区域。 - `L.circle`和`L.circleMarker`创建圆形标记或圆环...

    leaflet-office-employee-map:办公室演示图

    - 可能会用到 `L.popup` 功能,当用户点击某个员工标记时,弹出包含员工信息的气泡窗口。 - 如果有多个部门或楼层,可能会使用图层组(`L.layerGroup`)来组织不同组别的员工标记,方便切换显示。 - 数据动态加载:...

    arcgis工具

    :[工具] >>[添加XY 数据],在“添加XY 数据”窗口中,选择已添加的 XY 数据表,指定X 坐标字段(东经)和Y 坐标字段(北纬),按“编辑”按钮,选择坐标系统。一般GPS系统采用的坐标系统为WGS_1984。 方法二....

    py-leaflet-mapsite

    7. **地图标记和图层**:可以在地图上添加标记(Marker)表示特定位置,或者创建图层(Layer Group)来组织和管理多个地理元素。 8. **事件监听**:通过监听用户的点击、拖动等事件,可以实现地图上的交互功能,如...

Global site tag (gtag.js) - Google Analytics