<%@ 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 'marker_mousedown.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='http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhR_wWLPFku8Ix9i2SXYRVK3e45q1BQUd_beF8dtzKET_EteAjPdGDwqpQ'></script>
<script src="<%=basePath%>/Script/lib/OpenLayers.js"></script>
<script type="text/javascript">
var map = null;
var wms_url = "http://vmap0.tiles.osgeo.org/wms/vmap0";
var wms_version = "1.3.0";
var layer_name = 'country';
var wms_layer = null;
var marker_layer = null;
var marker = null;
function init()
{
//创建map对象，
map = new OpenLayers.Map("map");
var gphy = new OpenLayers.Layer.Google("Google Physical",{
type: G_PHYSICAL_MAP
});
wms_layer = new OpenLayers.Layer.WMS("OpenLayers WMS",
wms_url,
{layers: layer_name},
{singleTile: true});
marker_layer = new OpenLayers.Layer.Markers("markers");
// 添加图层
map.addLayers([gphy,wms_layer, marker_layer]);
map.addControl( new OpenLayers.Control.LayerSwitcher() );
map.addControl( new OpenLayers.Control.MousePosition());
//---------------------------------------------------------------//
//注册鼠标事件
// map.events.register('mousedown', map, onMakerMouseDown);
// 放大到全屏
map.zoomToMaxExtent();
}
function addMarker(x, y, opacity)
{
marker = new OpenLayers.Marker(new OpenLayers.LonLat(x, y));
//透明度
marker.setOpacity(opacity);
//注册鼠标事件
marker.events.register('mousedown', marker, onMakerMouseDown);
marker_layer.addMarker(marker);
}
/*
* 鼠标点击Marker的响应函数
*/
function onMakerMouseDown(evt)
{
//alert(evt.x);
alert(marker.CLASS_NAME);
OpenLayers.Event.stop(evt);
}
function onAddMarker()
{
var x = document.getElementById("X").value;
var y = document.getElementById("Y").value;
var opacity = document.getElementById("opacity").value;
addMarker(x, y, opacity);
}
</script>
</head>
<BODY onload="init()">
<div>
<div>X<input type="text" id="X" value="0">
Y<input type="text" id="Y" value="0">
透明度<input type="text" id="opacity" value="255">
<input type="button" value="Add Marker" onClick="onAddMarker();"></div>
<div id="map" class="smallmap"></div>
</div>
</BODY>
</html>
相关推荐
在本文中，我们将深入探讨如何在C#中利用GMap.NET库添加标记（marker）功能，这主要是在用户鼠标左键点击地图时实现。GMap.NET是一个强大的、免费且开源的地图控件，支持多种在线地图服务，如谷歌地图、必应地图等。...
private void gMapControl_MouseDown(object sender, MouseEventArgs e) { if (gMapControl.Markers.Count > 0 && gMapControl.PointToLatLng(e.Location) != null) { markerUnderMouse = gMapControl.Markers....
要实现Marker的移动功能，需要为GMap控件添加一些事件处理逻辑，例如MouseDown和MouseUp事件，来响应用户的拖拽操作。以下是一个简单的示例代码，展示了如何处理MouseDown和MouseUp事件： ```csharp // 添加事件...
* `mousedown`：当用户在地图上按下鼠标时触发。 * `mouseup`：当用户在地图上释放鼠标时触发。 * `mouseover`：当用户鼠标移到地图上时触发。 * `mouseout`：当用户鼠标离开地图时触发。 Layer：Leaflet中的图层...
@mousedown="onMarkerMouseDown(index)" @mouseup="onMarkerMouseUp" @mousemove="onMarkerMouseMove"> <i :class="marker.iconClass"> export default { data() { return { imageUrl: '', markers...
1. **Leaflet基础概念**: 包括Leaflet库的安装方法，如何在HTML文件中引入库，以及理解L.Map、L.Marker、L.TileLayer等核心对象。 2. **地图初始化**: 设置地图容器，定义初始视图（中心点、缩放级别），加载底图...
4. **添加鼠标事件处理**：为了响应用户的鼠标点击，你需要添加`GMapControl.MouseDown`事件的处理程序。当用户点击地图时，该事件会被触发。 5. **获取点击位置坐标**：在鼠标点击事件的处理函数中，你可以通过`e....
GEvent.addDomListener(zoomDiv, 'mousedown', function(e) { me.coverMousedown_(e); }); GEvent.addDomListener(document, 'mousemove', function(e) { me.drag_(e); }); GEvent.addDomListener(document, ...
例如，可以监听`mouseDown`事件来开始拖动，监听`mouseUp`事件来结束拖动： ```javascript graphic.addEventListener("mousedown", function(event) { graphic.startDrag(event.mapPoint); }); graphic....
$('#marker').on('mousedown', function(event) { // 开始拖拽操作 }).on('mousemove', function(event) { // 在拖拽过程中更新位置 }).on('mouseup', function(event) { // 结束拖拽操作 }); ``` 3. **...
- 如`mousedown`, `mouseup`, `mousemove`, `mouseout`等事件。 #### 九、其他关键知识点 - **基本类型**: - `LatLng`: 经纬度坐标。 - `LatLngBounds`: 经纬度边界。 - `Point`: 像素点。 - `Bounds`: 像素...
var marker = new BMap.Marker(point); // 创建标注 map.addOverlay(marker); // 将标注添加到地图 ``` 然后，创建一个`BMap.InfoWindow`对象来显示窗口内容，如地址或其他信息： ```javascript var infoWindow = ...
例如，你可以创建一个`GraphStyle`对象，然后设置它的`LineColor`、`LineWidth`和`MarkerSize`等属性，最后将该风格应用到你的数据系列上，通过`AddSeries`方法将其添加到CWgraph控件。 此外，CWgraph还支持实时...
在本项目中，我们需要利用API中的LBS（Location-Based Services）功能，如`BMap.Polygon`类来创建多边形图形，`BMap.Marker`类用于创建点标记，以及`BMap.Polyline`类来创建线性路径。 几何图形的绘制通常涉及到...
对于拖拽功能，我们需要监听用户的鼠标事件，如`mousedown`、`mousemove`和`mouseup`。当用户按下鼠标时，我们可以记录当前元素的位置和鼠标位置；在鼠标移动时，更新元素的位置，使其相对于鼠标位置保持不变；最后...
var marker = $("<div>").addClass("marker").css({ position: "absolute", width: "20px", height: "20px", backgroundColor: "red", left: x + "px", top: y + "px" }).appendTo("#MainImg"); } ``` ### ...