`

Maker-shadow

OpenlayersMarkershadown 
阅读更多

<%@ 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-shadow.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 SHADOW_Z_INDEX = 10;

        var MARKER_Z_INDEX = 11;

        var DIAMETER = 200;

        var NUMBER_OF_FEATURES = 15;

var map,layer;

function init(){

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

var renderer = OpenLayers.Util.getParameters(window.location.href).renderer;

            renderer = (renderer) ? [renderer] : OpenLayers.Layer.Vector.prototype.renderers;

layer = new OpenLayers.Layer.Vector(

                "Marker Drop Shadows",

                {

                    styleMap: new OpenLayers.StyleMap({

                        // Set the external graphic and background graphic images.

                        externalGraphic: "<%=basePath%>Script/img/marker-gold.png",

                        backgroundGraphic: "<%=basePath%>Script/img/marker_shadow.png",

                        

                        // Makes sure the background graphic is placed correctly relative

                        // to the external graphic.

                        backgroundXOffset: 0,

                        backgroundYOffset: -7,

                        

                        // Set the z-indexes of both graphics to make sure the background

                        // graphics stay in the background (shadows on top of markers looks

                        // odd; let's not do that).

                        graphicZIndex: MARKER_Z_INDEX,

                        backgroundGraphicZIndex: SHADOW_Z_INDEX,

                        

                        pointRadius: 10

                    }),

                    isBaseLayer: true,

                    rendererOptions: {yOrdering: true},

                    renderers: renderer

                }

            );

            console.log('<%=basePath%>Script/img/marker-gold.png');

 

map.addLayers([layer]);

map.addControls([new OpenLayers.Control.LayerSwitcher(),new OpenLayers.Control.MousePosition()]);

map.zoomToMaxExtent();

layer.addFeatures(new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(-37.96875,54.84375)));

}

</script>

  </head>

  

  <body onload="init();">

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

  <ul>

  <li>创建地图对象</li>

  <li>创建地图图层【设置扩展图和扩展图的背景图，设置图片相对位置】</li>

  <li>创建画布上的点point[程序执行顺序是1、创建地图 2、创建点 3、设置点的位置图]</li>

  </ul>

  <hr>

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

  </body>

</html>

 

分享到：
| Marker(mousedown)
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics