openlayers实现本地图片作为背景，添加marker标记

【实例简介】
刚刚使用openlayers做了一个简单的小例子，注释很全，很简单，将本地的图片作为背景，能够按照坐标添加任意个标记
【实例截图】
【核心代码】
openlayers
└── openlayers
└── WebRoot
├── basic.png
├── img
│   ├── blank.gif
│   ├── cloud-popup-relative.png
│   ├── drag-rectangle-off.png
│   ├── drag-rectangle-on.png
│   ├── east-mini.png
│   ├── layer-switcher-maximize.png
│   ├── layer-switcher-minimize.png
│   ├── marker-blue.png
│   ├── marker-gold.png
│   ├── marker-green.png
│   ├── marker.png
│   ├── measuring-stick-off.png
│   ├── measuring-stick-on.png
│   ├── north-mini.png
│   ├── panning-hand-off.png
│   ├── panning-hand-on.png
│   ├── slider.png
│   ├── south-mini.png
│   ├── west-mini.png
│   ├── zoombar.png
│   ├── zoom-minus-mini.png
│   ├── zoom-plus-mini.png
│   └── zoom-world-mini.png
├── index.jsp
├── Jsp.jsp
├── lib
│   ├── deprecated.js
│   ├── Firebug
│   │   ├── errorIcon.png
│   │   ├── firebug.css
│   │   ├── firebug.html
│   │   ├── firebug.js
│   │   ├── firebugx.js
│   │   ├── infoIcon.png
│   │   ├── license.txt
│   │   ├── readme.txt
│   │   └── warningIcon.png
│   ├── OpenLayers
│   │   ├── Animation.js
│   │   ├── BaseTypes
│   │   │   ├── Bounds.js
│   │   │   ├── Class.js
│   │   │   ├── Date.js
│   │   │   ├── Element.js
│   │   │   ├── LonLat.js
│   │   │   ├── Pixel.js
│   │   │   └── Size.js
│   │   ├── BaseTypes.js
│   │   ├── Console.js
│   │   ├── Control
│   │   │   ├── ArgParser.js
│   │   │   ├── Attribution.js
│   │   │   ├── Button.js
│   │   │   ├── CacheRead.js
│   │   │   ├── CacheWrite.js
│   │   │   ├── DragFeature.js
│   │   │   ├── DragPan.js
│   │   │   ├── DrawFeature.js
│   │   │   ├── EditingToolbar.js
│   │   │   ├── Geolocate.js
│   │   │   ├── GetFeature.js
│   │   │   ├── Graticule.js
│   │   │   ├── KeyboardDefaults.js
│   │   │   ├── LayerSwitcher.js
│   │   │   ├── Measure.js
│   │   │   ├── ModifyFeature.js
│   │   │   ├── MousePosition.js
│   │   │   ├── NavigationHistory.js
│   │   │   ├── Navigation.js
│   │   │   ├── NavToolbar.js
│   │   │   ├── OverviewMap.js
│   │   │   ├── Panel.js
│   │   │   ├── Pan.js
│   │   │   ├── PanPanel.js
│   │   │   ├── PanZoomBar.js
│   │   │   ├── PanZoom.js
│   │   │   ├── Permalink.js
│   │   │   ├── PinchZoom.js
│   │   │   ├── Scale.js
│   │   │   ├── ScaleLine.js
│   │   │   ├── SelectFeature.js
│   │   │   ├── SLDSelect.js
│   │   │   ├── Snapping.js
│   │   │   ├── Split.js
│   │   │   ├── TouchNavigation.js
│   │   │   ├── TransformFeature.js
│   │   │   ├── UTFGrid.js
│   │   │   ├── WMSGetFeatureInfo.js
│   │   │   ├── WMTSGetFeatureInfo.js
│   │   │   ├── ZoomBox.js
│   │   │   ├── ZoomIn.js
│   │   │   ├── Zoom.js
│   │   │   ├── ZoomOut.js
│   │   │   ├── ZoomPanel.js
│   │   │   └── ZoomToMaxExtent.js
│   │   ├── Control.js
│   │   ├── Events
│   │   │   └── buttonclick.js
│   │   ├── Events.js
│   │   ├── Feature
│   │   │   └── Vector.js
│   │   ├── Feature.js
│   │   ├── Filter
│   │   │   ├── Comparison.js
│   │   │   ├── FeatureId.js
│   │   │   ├── Function.js
│   │   │   ├── Logical.js
│   │   │   └── Spatial.js
│   │   ├── Filter.js
│   │   ├── Format
│   │   │   ├── ArcXML
│   │   │   │   └── Features.js
│   │   │   ├── ArcXML.js
│   │   │   ├── Atom.js
│   │   │   ├── Context.js
│   │   │   ├── CQL.js
│   │   │   ├── CSWGetDomain
│   │   │   │   └── v2_0_2.js
│   │   │   ├── CSWGetDomain.js
│   │   │   ├── CSWGetRecords
│   │   │   │   └── v2_0_2.js
│   │   │   ├── CSWGetRecords.js
│   │   │   ├── EncodedPolyline.js
│   │   │   ├── Filter
│   │   │   │   ├── v1_0_0.js
│   │   │   │   ├── v1_1_0.js
│   │   │   │   └── v1.js
│   │   │   ├── Filter.js
│   │   │   ├── GeoJSON.js
│   │   │   ├── GeoRSS.js
│   │   │   ├── GML
│   │   │   │   ├── Base.js
│   │   │   │   ├── v2.js
│   │   │   │   └── v3.js
│   │   │   ├── GML.js
│   │   │   ├── GPX.js
│   │   │   ├── JSON.js
│   │   │   ├── KML.js
│   │   │   ├── OGCExceptionReport.js
│   │   │   ├── OSM.js
│   │   │   ├── OWSCommon
│   │   │   │   ├── v1_0_0.js
│   │   │   │   ├── v1_1_0.js
│   │   │   │   └── v1.js
│   │   │   ├── OWSCommon.js
│   │   │   ├── OWSContext
│   │   │   │   └── v0_3_1.js
│   │   │   ├── OWSContext.js
│   │   │   ├── QueryStringFilter.js
│   │   │   ├── SLD
│   │   │   │   ├── v1_0_0_GeoServer.js
│   │   │   │   ├── v1_0_0.js
│   │   │   │   └── v1.js
│   │   │   ├── SLD.js
│   │   │   ├── SOSCapabilities
│   │   │   │   └── v1_0_0.js
│   │   │   ├── SOSCapabilities.js
│   │   │   ├── SOSGetFeatureOfInterest.js
│   │   │   ├── SOSGetObservation.js
│   │   │   ├── Text.js
│   │   │   ├── WCSCapabilities
│   │   │   │   ├── v1_0_0.js
│   │   │   │   ├── v1_1_0.js
│   │   │   │   └── v1.js
│   │   │   ├── WCSCapabilities.js
│   │   │   ├── WCSGetCoverage.js
│   │   │   ├── WFSCapabilities
│   │   │   │   ├── v1_0_0.js
│   │   │   │   ├── v1_1_0.js
│   │   │   │   └── v1.js
│   │   │   ├── WFSCapabilities.js
│   │   │   ├── WFSDescribeFeatureType.js
│   │   │   ├── WFS.js
│   │   │   ├── WFST
│   │   │   │   ├── v1_0_0.js
│   │   │   │   ├── v1_1_0.js
│   │   │   │   └── v1.js
│   │   │   ├── WFST.js
│   │   │   ├── WKT.js
│   │   │   ├── WMC
│   │   │   │   ├── v1_0_0.js
│   │   │   │   ├── v1_1_0.js
│   │   │   │   └── v1.js
│   │   │   ├── WMC.js
│   │   │   ├── WMSCapabilities
│   │   │   │   ├── v1_1_0.js
│   │   │   │   ├── v1_1_1.js
│   │   │   │   ├── v1_1_1_WMSC.js
│   │   │   │   ├── v1_1.js
│   │   │   │   ├── v1_3_0.js
│   │   │   │   ├── v1_3.js
│   │   │   │   └── v1.js
│   │   │   ├── WMSCapabilities.js
│   │   │   ├── WMSDescribeLayer
│   │   │   │   └── v1_1.js
│   │   │   ├── WMSDescribeLayer.js
│   │   │   ├── WMSGetFeatureInfo.js
│   │   │   ├── WMTSCapabilities
│   │   │   │   └── v1_0_0.js
│   │   │   ├── WMTSCapabilities.js
│   │   │   ├── WPSCapabilities
│   │   │   │   └── v1_0_0.js
│   │   │   ├── WPSCapabilities.js
│   │   │   ├── WPSDescribeProcess.js
│   │   │   ├── WPSExecute.js
│   │   │   ├── XLS
│   │   │   │   ├── v1_1_0.js
│   │   │   │   └── v1.js
│   │   │   ├── XLS.js
│   │   │   ├── XML
│   │   │   │   └── VersionedOGC.js
│   │   │   └── XML.js
│   │   ├── Format.js
│   │   ├── Geometry
│   │   │   ├── Collection.js
│   │   │   ├── Curve.js
│   │   │   ├── LinearRing.js
│   │   │   ├── LineString.js
│   │   │   ├── MultiLineString.js
│   │   │   ├── MultiPoint.js
│   │   │   ├── MultiPolygon.js
│   │   │   ├── Point.js
│   │   │   └── Polygon.js
│   │   ├── Geometry.js
│   │   ├── Handler
│   │   │   ├── Box.js
│   │   │   ├── Click.js
│   │   │   ├── Drag.js
│   │   │   ├── Feature.js
│   │   │   ├── Hover.js
│   │   │   ├── Keyboard.js
│   │   │   ├── MouseWheel.js
│   │   │   ├── Path.js
│   │   │   ├── Pinch.js
│   │   │   ├── Point.js
│   │   │   ├── Polygon.js
│   │   │   └── RegularPolygon.js
│   │   ├── Handler.js
│   │   ├── Icon.js
│   │   ├── Kinetic.js
│   │   ├── Lang
│   │   │   ├── ar.js
│   │   │   ├── be-tarask.js
│   │   │   ├── bg.js
│   │   │   ├── br.js
│   │   │   ├── ca.js
│   │   │   ├── cs-CZ.js
│   │   │   ├── da-DK.js
│   │   │   ├── de.js
│   │   │   ├── el.js
│   │   │   ├── en-CA.js
│   │   │   ├── en.js
│   │   │   ├── es.js
│   │   │   ├── fi.js
│   │   │   ├── fr.js
│   │   │   ├── fur.js
│   │   │   ├── gl.js
│   │   │   ├── gsw.js
│   │   │   ├── hr.js
│   │   │   ├── hsb.js
│   │   │   ├── hu.js
│   │   │   ├── ia.js
│   │   │   ├── id.js
│   │   │   ├── io.js
│   │   │   ├── is.js
│   │   │   ├── it.js
│   │   │   ├── ja.js
│   │   │   ├── km.js
│   │   │   ├── ksh.js
│   │   │   ├── lt.js
│   │   │   ├── nb.js
│   │   │   ├── nds.js
│   │   │   ├── nl.js
│   │   │   ├── nn.js
│   │   │   ├── oc.js
│   │   │   ├── pl.js
│   │   │   ├── pt-BR.js
│   │   │   ├── pt.js
│   │   │   ├── ro.js
│   │   │   ├── ru.js
│   │   │   ├── sk.js
│   │   │   ├── sv-SE.js
│   │   │   ├── te.js
│   │   │   ├── vi.js
│   │   │   ├── zh-CN.js
│   │   │   └── zh-TW.js
│   │   ├── Lang.js
│   │   ├── Layer
│   │   │   ├── ArcGIS93Rest.js
│   │   │   ├── ArcGISCache.js
│   │   │   ├── ArcIMS.js
│   │   │   ├── Bing.js
│   │   │   ├── Boxes.js
│   │   │   ├── EventPane.js
│   │   │   ├── FixedZoomLevels.js
│   │   │   ├── GeoRSS.js
│   │   │   ├── Google
│   │   │   │   └── v3.js
│   │   │   ├── Google.js
│   │   │   ├── Grid.js
│   │   │   ├── HTTPRequest.js
│   │   │   ├── Image.js
│   │   │   ├── KaMapCache.js
│   │   │   ├── KaMap.js
│   │   │   ├── MapGuide.js
│   │   │   ├── MapServer.js
│   │   │   ├── Markers.js
│   │   │   ├── OSM.js
│   │   │   ├── PointGrid.js
│   │   │   ├── PointTrack.js
│   │   │   ├── SphericalMercator.js
│   │   │   ├── Text.js
│   │   │   ├── TileCache.js
│   │   │   ├── TMS.js
│   │   │   ├── UTFGrid.js
│   │   │   ├── Vector
│   │   │   │   └── RootContainer.js
│   │   │   ├── Vector.js
│   │   │   ├── WMS.js
│   │   │   ├── WMTS.js
│   │   │   ├── WorldWind.js
│   │   │   ├── XYZ.js
│   │   │   └── Zoomify.js
│   │   ├── Layer.js
│   │   ├── Map.js
│   │   ├── Marker
│   │   │   └── Box.js
│   │   ├── Marker.js
│   │   ├── Popup
│   │   │   ├── AnchoredBubble.js
│   │   │   ├── Anchored.js
│   │   │   ├── FramedCloud.js
│   │   │   └── Framed.js
│   │   ├── Popup.js
│   │   ├── Projection.js
│   │   ├── Protocol
│   │   │   ├── CSW
│   │   │   │   └── v2_0_2.js
│   │   │   ├── CSW.js
│   │   │   ├── HTTP.js
│   │   │   ├── Script.js
│   │   │   ├── SOS
│   │   │   │   └── v1_0_0.js
│   │   │   ├── SOS.js
│   │   │   ├── WFS
│   │   │   │   ├── v1_0_0.js
│   │   │   │   ├── v1_1_0.js
│   │   │   │   └── v1.js
│   │   │   └── WFS.js
│   │   ├── Protocol.js
│   │   ├── Renderer
│   │   │   ├── Canvas.js
│   │   │   ├── Elements.js
│   │   │   ├── SVG.js
│   │   │   └── VML.js
│   │   ├── Renderer.js
│   │   ├── Request
│   │   │   └── XMLHttpRequest.js
│   │   ├── Request.js
│   │   ├── Rule.js
│   │   ├── SingleFile.js
│   │   ├── Spherical.js
│   │   ├── Strategy
│   │   │   ├── BBOX.js
│   │   │   ├── Cluster.js
│   │   │   ├── Filter.js
│   │   │   ├── Fixed.js
│   │   │   ├── Paging.js
│   │   │   ├── Refresh.js
│   │   │   └── Save.js
│   │   ├── Strategy.js
│   │   ├── Style2.js
│   │   ├── Style.js
│   │   ├── StyleMap.js
│   │   ├── Symbolizer
│   │   │   ├── Line.js
│   │   │   ├── Point.js
│   │   │   ├── Polygon.js
│   │   │   ├── Raster.js
│   │   │   └── Text.js
│   │   ├── Symbolizer.js
│   │   ├── Tile
│   │   │   ├── Image
│   │   │   │   └── IFrame.js
│   │   │   ├── Image.js
│   │   │   └── UTFGrid.js
│   │   ├── Tile.js
│   │   ├── TileManager.js
│   │   ├── Tween.js
│   │   ├── Util
│   │   │   └── vendorPrefix.js
│   │   ├── Util.js
│   │   ├── WPSClient.js
│   │   └── WPSProcess.js
│   ├── OpenLayers.js
│   └── Rico
│   ├── Color.js
│   ├── Corner.js
│   └── license.js
├── META-INF
│   └── MANIFEST.MF
├── MyJsp.jsp
├── OpenLayers.js
├── style.css
├── theme
│   └── default
│   ├── google.css
│   ├── ie6-style.css
│   ├── img
│   │   ├── add_point_off.png
│   │   ├── add_point_on.png
│   │   ├── blank.gif
│   │   ├── close.gif
│   │   ├── drag-rectangle-off.png
│   │   ├── drag-rectangle-on.png
│   │   ├── draw_line_off.png
│   │   ├── draw_line_on.png
│   │   ├── draw_point_off.png
│   │   ├── draw_point_on.png
│   │   ├── draw_polygon_off.png
│   │   ├── draw_polygon_on.png
│   │   ├── editing_tool_bar.png
│   │   ├── move_feature_off.png
│   │   ├── move_feature_on.png
│   │   ├── navigation_history.png
│   │   ├── overview_replacement.gif
│   │   ├── panning-hand-off.png
│   │   ├── panning-hand-on.png
│   │   ├── pan_off.png
│   │   ├── pan_on.png
│   │   ├── pan-panel-NOALPHA.png
│   │   ├── pan-panel.png
│   │   ├── remove_point_off.png
│   │   ├── remove_point_on.png
│   │   ├── ruler.png
│   │   ├── save_features_off.png
│   │   ├── save_features_on.png
│   │   ├── view_next_off.png
│   │   ├── view_next_on.png
│   │   ├── view_previous_off.png
│   │   ├── view_previous_on.png
│   │   ├── zoom-panel-NOALPHA.png
│   │   └── zoom-panel.png
│   ├── style.css
│   └── style.mobile.css
└── 捕获.PNG

55 directories, 395 files