Ver Mensaje Individual
  #5 (permalink)  
Antiguo 30/03/2010, 06:39
Avatar de jhonnybmx
jhonnybmx
 
Fecha de Ingreso: abril-2007
Ubicación: Bogotá, colombia
Mensajes: 22
Antigüedad: 17 años
Puntos: 0
Respuesta: openLayer: obtener coordenadas

Como puedo arrastrar con el mouse este marker por el mapa... HELP ME

Código Javascript:
Ver original
  1. <html xmlns="http://www.w3.org/1999/xhtml">
  2. <head>
  3. <title>Mapa</title>
  4.  
  5.  
  6. <script type="text/javascript">
  7. var estado;
  8. </script>
  9.  
  10.  
  11. <href="http://www.openlayers.org/api/theme/default/style.css" rel="stylesheet" type="text/css">
  12.  
  13.  
  14. <script type="text/javascript">
  15.  
  16. </script>
  17. <style type="text/css">
  18. #map {
  19. width: 1024px;
  20. height: 600px;
  21.  
  22. }
  23.  
  24. </style>
  25.  
  26.  
  27.  
  28.  
  29. <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAKFodoFaBZaU8 L0Mhu_fIzRSrxPxopuoSrb5BI6peR2a09rRn8RRnu6DuAoT0ns Xlprymp7eddPoJtg"></script>
  30.  
  31. <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
  32.  
  33.  
  34.  
  35. <script type="text/javascript">
  36. var ZoomLevels = 18;
  37. var bounds = new OpenLayers.Bounds(-81.7358169555665, -4.23687362670895, -66.8704528808595, 12.5947074890135);
  38. var boundsToExtent = new OpenLayers.Bounds(-180, -90, 180, 90);
  39. var format = 'image/png';
  40. var zoom = 1;
  41. var map, controls, texto_capa;
  42.  
  43. var layer;
  44.  
  45.  
  46.  
  47. var MapOptions = {
  48. controls: [],
  49. maxResolution: 0.17578125,
  50. numZoomLevels: ZoomLevels,
  51. projection: new OpenLayers.Projection('EPSG:4326'),
  52. maxExtent: boundsToExtent
  53.  
  54.  
  55.  
  56. };
  57.  
  58. var OvOptions = {
  59. maxExtent: bounds,
  60. projection: new OpenLayers.Projection('EPSG:4326'),
  61. resolutions:[
  62. 0.17578125,
  63. 0.087890625,
  64. 0.0439453125,
  65. 0.02197265625,
  66. 0.010986328125,
  67. 0.0054931640625,
  68. 0.00274658203125,
  69. 0.001373291015625,
  70. 0.0006866455078125,
  71. 0.00034332275390625,
  72. 0.000171661376953125,
  73. 0.0000858306884765625,
  74. 0.00004291534423828125,
  75. 0.000021457672119140625,
  76. 0.0000107288360595703125,
  77. 0.00000536441802978515625,
  78. 0.000002682209014892578125,
  79. 0.0000013411045074462890625
  80. ]
  81. };
  82.  
  83.  
  84.  
  85.  
  86.  
  87. function init() {
  88.  
  89. map = new OpenLayers.Map(document.getElementById('map'), MapOptions)
  90.  
  91.  
  92. width = map.clientWidth;
  93. MapOptions.maxResolution = (MapOptions.maxExtent.right-MapOptions.maxExtent.left)/width;
  94.  
  95. ntb = new OpenLayers.Control.Navigation();
  96. map.addControl(ntb);
  97.  
  98. pzb = new OpenLayers.Control.PanZoomBar({position: new OpenLayers.Pixel(1, 5)});
  99. map.addControl(pzb);
  100.  
  101. atr = new OpenLayers.Control.Attribution();
  102. map.addControl(atr);
  103.  
  104. lsw = new OpenLayers.Control.LayerSwitcher();
  105. lsw.activeColor = "#99B3CC";
  106. map.addControl(lsw);
  107. lsw.maximizeControl();
  108.  
  109.  
  110. nav = new OpenLayers.Control.NavigationHistory();
  111. map.addControl(nav);
  112.  
  113. var controlOptions = {
  114. mapOptions: OvOptions,
  115. autoPan: true
  116. }
  117.  
  118.  
  119. loadControlOpenLayer();
  120.  
  121.  
  122. var overview = new OpenLayers.Control.OverviewMap(controlOptions);
  123.  
  124.  
  125. var gphy = new OpenLayers.Layer.Google(
  126. "Google Physical",
  127. {type: G_PHYSICAL_MAP}
  128. );
  129. var gmap = new OpenLayers.Layer.Google(
  130. "Google Streets", // the default
  131. {numZoomLevels: 20}
  132. );
  133. var ghyb = new OpenLayers.Layer.Google(
  134. "Google Hybrid",
  135. {type: G_HYBRID_MAP, numZoomLevels: 20}
  136. );
  137. var gsat = new OpenLayers.Layer.Google(
  138. "Google Satellite",
  139. {type: G_SATELLITE_MAP, numZoomLevels: 20}
  140. );
  141.  
  142.  
  143. map.addLayers([gphy, gmap, ghyb, gsat]);
  144.  
  145.  
  146. map.setCenter(new OpenLayers.LonLat(-70.2, 6.9), 6);
  147.  
  148.  
  149. loadControlOpenLayer();
  150.  
  151.  
  152.  
  153. pintar();
  154.  
  155.  
  156.  
  157.  
  158. }//end in
  159.  
  160.  
  161.  
  162.  
  163. function loadControlOpenLayer()
  164. {
  165. OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control,
  166. {
  167. 'handleRightClicks': true, defaultHandlerOptions:
  168. {
  169. 'single': true,
  170. 'double': false,
  171. 'pixelTolerance': 0,
  172. 'stopSingle': false,
  173. 'stopDouble': false
  174. },
  175.  
  176. initialize: function(options)
  177. {
  178. this.handlerOptions = OpenLayers.Util.extend
  179. (
  180. {}, this.defaultHandlerOptions
  181. );
  182. OpenLayers.Control.prototype.initialize.apply
  183. (
  184. this, arguments
  185. );
  186. this.handler = new OpenLayers.Handler.Click(
  187. this, {
  188. 'click': this.onClick,
  189. 'dblclick': this.onDblclick,
  190. 'rightclick':this.onRightClick
  191. }, this.handlerOptions
  192. );
  193. },
  194. onClick: function(evt) {
  195.  
  196. if(estado!=2){
  197. pintar(evt);
  198.  
  199. if(estado==2){
  200.  
  201. }else{
  202. estado=1;
  203. }
  204. }
  205. //addPoint(lonlat.lon, lonlat.lat);
  206.  
  207. },
  208. onRightClick: function(evt) {
  209. /*
  210. funcion para controlar el click derecho
  211. */
  212. },
  213. onDblclick: function(evt) {
  214.  
  215. },
  216. trigger: function(e) {}
  217. });
  218.  
  219.  
  220. controls =
  221. {
  222. "single": new OpenLayers.Control.Click(
  223. {
  224. handlerOptions: {
  225. "single": true,
  226. "double": false
  227. }
  228.  
  229. }),
  230.  
  231. "double": new OpenLayers.Control.Click({
  232. handlerOptions: {
  233. "single": false,
  234. "double": true
  235. }
  236. }),
  237.  
  238. "both": new OpenLayers.Control.Click({
  239. handlerOptions: {
  240. "single": true,
  241. "double": true
  242. }
  243. }),
  244.  
  245. "drag": new OpenLayers.Control.Click({
  246. handlerOptions: {
  247. "single": true,
  248. "pixelTolerance": null
  249. }
  250. }),
  251.  
  252. "stopsingle": new OpenLayers.Control.Click({
  253. handlerOptions: {
  254. "single": true,
  255. "stopSingle": true
  256. }
  257. }),
  258.  
  259. "stopdouble": new OpenLayers.Control.Click({
  260. handlerOptions: {
  261. "single": false,
  262. "double": true,
  263. "stopDouble": true
  264. }
  265. })
  266. };
  267.  
  268. vectors = new OpenLayers.Layer.Vector("Vector Layer");
  269. controls2 = {
  270. point: new OpenLayers.Control.DrawFeature(vectors, OpenLayers.Handler.Point),
  271.  
  272. drag: new OpenLayers.Control.DragFeature(vectors)
  273. };
  274.  
  275.  
  276. for(var key2 in controls2) {
  277. map.addControl(controls2[key2]);
  278. }
  279.  
  280. for(var key in controls) {
  281. controle = controls[key];
  282. controle.key = key;
  283. map.addControl(controle);
  284. }
  285.  
  286. }
  287. function pintar()
  288. {
  289.  
  290. var markers = new OpenLayers.Layer.Markers( "Markers" );
  291. map.addLayer(markers);
  292.  
  293. var size = new OpenLayers.Size(32,32);
  294. var offset = new OpenLayers.Pixel(-(size.w/2)+7, -size.h-2);
  295. var icon = new OpenLayers.Icon('http://conap.gob.gt:7777/Conap/Members/ecancinos/plonelocalfolderng.2006-05-16.0529378581/InstalarProgs/Maps/skins/Maps/marker-blue.png',size,offset);
  296.  
  297. markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(-70,9),icon));
  298.  
  299. estado=2;
  300.  
  301.  
  302. }
  303.  
  304.  
  305.  
  306.  
  307. </script>
  308.  
  309.  
  310.  
  311. </head>
  312. <Body onLoad="init()" >
  313.  
  314. <div id="map" class="smallmap" style="border:solid"></div>
  315.  
  316.  
  317. </body>
  318. </html>
  319.     Editar/Borrar Mensaje