Marker(mousedown)

iteye_11116

于 2013-09-22 00:29:05 发布

阅读量155

点赞数

CC 4.0 BY-SA版权

分类专栏： OpenLayers 文章标签： OpenLayers Marker mousedown

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.youkuaiyun.com/iteye_11116/article/details/82540948

OpenLayers 专栏收录该内容

24 篇文章

订阅专栏

本文介绍如何使用OpenLayers库和Google Maps API构建一个交互式的地图应用，包括设置基本布局、添加地图层、创建Marker并响应鼠标事件。通过简单的JavaScript代码实现地图上Marker的添加和展示，为开发者提供了一个实用的地图应用开发教程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<%@ 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>

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

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