OpenLayers的使用(google地图)
要使用google地图，先要获得google的密钥，可以使用了之后，我们就可以通过OpenLayers来操作，对google地图进行布局，增加事件什么的。下面就是一个简单的例子，类似定位。<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><%@ page language="java" contentType="text/html;charset=UTF-8"%><%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%><html><head><title>Test OpenLayers</title><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><script src='http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAiaPj-nq6xmaIlKL7JGMDMBQuGyTEa3GqgqWF5HGZOViJUH6UdRSMFvsEDx1rNkGSOnD2AI7xXht7xg'></script><script src="<%=request.getContextPath()%>/js/openlayers/lib/OpenLayers.js"></script><script defer="defer" type="text/javascript">var map;function setMarker(point, name_mobile,info){var mobile = name_mobile.split(',');var name = name_mobile.split(',');var markers = new OpenLayers.Layer.Markers( "Markers" );map.addLayer(markers); var lonLatMarker = point; var feature = new OpenLayers.Feature(markers, lonLatMarker); feature.closeBox = true; feature.popupClass = OpenLayers.Class(OpenLayers.Popup.FramedCloud, {minSize: new OpenLayers.Size(200, 200),maxSize: new OpenLayers.Size(280, 280) }); feature.data.popupContentHTML = "<div style='font-size:.8em'>"+mobile+"("+name+")"+"位于:<br/>"+info+"</div><p/><center><img style='vertical-align: middle;' src='<%=request.getContextPath()%>/img/tools/button_legend.gif'/><a class='menu_font2' href='###' onclick='javascript:sendsms("+"\""+name_mobile+"\""+");'>短信</a></center>"; feature.data.overflow = "hidden";size = new OpenLayers.Size(50,50);calculateOffset = function(size) {return new OpenLayers.Pixel(-(size.w/2), -size.h); };icon = new OpenLayers.Icon('<%=request.getContextPath()%>/img/msn.png',size, null,calculateOffset); var marker = new OpenLayers.Marker(lonLatMarker, icon); marker.feature = feature;popup = feature.createPopup(true);map.addPopup(popup);popup.show(); var markerClick = function(evt) { if (this.popup == null) { this.popup = this.createPopup(this.closeBox); map.addPopup(this.popup); this.popup.show(); } else { this.popup.toggle(); } OpenLayers.Event.stop(evt); }; marker.events.register("mousedown", feature, markerClick); markers.addMarker(marker);}function init() {map = new OpenLayers.Map('map', {allOverlays: true});// map.addControl(new OpenLayers.Control.LayerSwitcher()); var gmap = new OpenLayers.Layer.Google( "Google Streets", // the default {numZoomLevels: 20} ); map.addLayer(gmap); vlayer = new OpenLayers.Layer.Vector("Editable"); map.addLayer(vlayer); map.addControl(new OpenLayers.Control.MousePosition()); map.addControl(new OpenLayers.Control.OverviewMap());map.addControl(new OpenLayers.Control.PanZoomBar());map.addControl(new OpenLayers.Control.EditingToolbar(vlayer)); map.setCenter(new OpenLayers.LonLat(114.062, 22.54), 12); setMarker(new OpenLayers.LonLat(114.062, 22.54),"12510827609,hhw","西丽");/* var markers = new OpenLayers.Layer.Markers( "Markers" );map.addLayer(markers);var icon = new OpenLayers.Icon('<%=request.getContextPath()%>/img/mobile.png'); var icon = new OpenLayers.Icon('<%=request.getContextPath()%>/img/mobile.png');markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(113.96052,22.59158),icon));markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(114.062, 22.54),icon.clone())); */}</script><style type="text/css">#map { width: 100%; height: 100%; border: 2px solid black; background-color: #FFFFFF;}</style></head><body > <h1>OpenLayers Test</h1> <table width="100%" height="400"> <tr><td width="100%" height="100%"> <div id="map"></div> </td></tr> </table></body></html>
页:
[1]