lespetitshackers:ffox:gpsdyn_map
Différences
Ci-dessous, les différences entre deux révisions de la page.
Prochaine révision | Révision précédente | ||
lespetitshackers:ffox:gpsdyn_map [2013/07/17 12:43] – créée benvii | lespetitshackers:ffox:gpsdyn_map [2024/04/16 22:26] (Version actuelle) – modification externe 127.0.0.1 | ||
---|---|---|---|
Ligne 1: | Ligne 1: | ||
+ | ====== Un point suivant la position GPS ... ====== | ||
+ | ===== Probématique ===== | ||
+ | |||
+ | Le script (ci-dessous) position un cercle sur une carte indiquant la position de l' | ||
+ | |||
+ | Il est basé sur le [[http:// | ||
+ | |||
+ | ===== Le code ... ===== | ||
+ | |||
+ | <code XML> | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | | ||
+ | <!-- OpenLayers --> | ||
+ | <script src=" | ||
+ | <script src=" | ||
+ | | ||
+ | <script type=" | ||
+ | var idEl = function( id ){ return document.getElementById( id );} | ||
+ | </ | ||
+ | | ||
+ | </ | ||
+ | < | ||
+ | |||
+ | < | ||
+ | |||
+ | < | ||
+ | <input type=" | ||
+ | <div style=" | ||
+ | |||
+ | < | ||
+ | <button onclick=" | ||
+ | <div id=" | ||
+ | |||
+ | |||
+ | <script type=" | ||
+ | | ||
+ | // | ||
+ | var osmMap = function(){ | ||
+ | var map = new OpenLayers.Map(" | ||
+ | layerMapnik = new OpenLayers.Layer.OSM.Mapnik(" | ||
+ | hostedTiles = new OpenLayers.Layer.OSM(" | ||
+ | defaultZoom = 15; | ||
+ | | ||
+ | map.addLayers( [ layerMapnik, | ||
+ | | ||
+ | var switcherControl = new OpenLayers.Control.LayerSwitcher(); | ||
+ | map.addControl(switcherControl); | ||
+ | | ||
+ | var vector = new OpenLayers.Layer.Vector(' | ||
+ | map.addLayer(vector); | ||
+ | | ||
+ | var firstGeolocation = true, | ||
+ | convertLonLat = function( coords ){ //Convert coords.longitude and coords.latitude only if needed | ||
+ | if( !( " | ||
+ | var lonlat = new OpenLayers.LonLat( | ||
+ | coords.longitude, | ||
+ | coords.latitude | ||
+ | ).transform( | ||
+ | new OpenLayers.Projection(" | ||
+ | map.getProjectionObject() | ||
+ | ); | ||
+ | coords.longitude = lonlat.lon; | ||
+ | coords.latitude = lonlat.lat; | ||
+ | coords.isESPG = true; | ||
+ | } | ||
+ | | ||
+ | return coords; | ||
+ | }, | ||
+ | getPoint = function( coords ){ //Return a geometry point from coords | ||
+ | coords = convertLonLat( coords ); | ||
+ | return new OpenLayers.Geometry.Point( coords.longitude, | ||
+ | }, | ||
+ | centerMap = function( coords, zoom ){ //zoom is optionnal | ||
+ | coords = convertLonLat( coords ); | ||
+ | zoom = (zoom) ? zoom : defaultZoom; | ||
+ | if( ! map.getCenter() ){ | ||
+ | map.setCenter( new OpenLayers.LonLat( coords.longitude, | ||
+ | } | ||
+ | }, | ||
+ | updateGPSCross = function( coords ){ | ||
+ | vector.removeAllFeatures(); | ||
+ | | ||
+ | var style = { | ||
+ | fillColor: '# | ||
+ | fillOpacity: | ||
+ | strokeWidth: | ||
+ | }; | ||
+ | | ||
+ | var point = getPoint( coords ); | ||
+ | | ||
+ | var circle = new OpenLayers.Feature.Vector( | ||
+ | OpenLayers.Geometry.Polygon.createRegularPolygon( | ||
+ | new OpenLayers.Geometry.Point( point.x, point.y ), | ||
+ | coords.accuracy/ | ||
+ | 40, | ||
+ | 0 | ||
+ | ), | ||
+ | {}, | ||
+ | style | ||
+ | ); | ||
+ | vector.addFeatures([ | ||
+ | new OpenLayers.Feature.Vector( | ||
+ | point, | ||
+ | {}, | ||
+ | { | ||
+ | graphicName: | ||
+ | strokeColor: | ||
+ | strokeWidth: | ||
+ | fillOpacity: | ||
+ | pointRadius: | ||
+ | } | ||
+ | ), | ||
+ | circle | ||
+ | ]); | ||
+ | if (firstGeolocation) { //Only zoom for the first position | ||
+ | map.zoomToExtent(vector.getDataExtent()); | ||
+ | firstGeolocation = false; | ||
+ | } | ||
+ | }; | ||
+ | | ||
+ | centerMap( { longitude: -4.47607356, | ||
+ | | ||
+ | return{ updateGPSCross: | ||
+ | }(); | ||
+ | | ||
+ | // | ||
+ | var geoloc = function(){ | ||
+ | var geolocation = navigator.geolocation; | ||
+ | | ||
+ | var log = function( m ){ | ||
+ | window.console.log( m ); | ||
+ | document.getElementById(" | ||
+ | }; | ||
+ | | ||
+ | var logPosition = function( position ){ | ||
+ | var l = " | ||
+ | l += " lat=" +position.coords.latitude; | ||
+ | l += " long=" | ||
+ | l += " accuracy=" | ||
+ | l += " timestamp=" | ||
+ | log( l ); | ||
+ | }; | ||
+ | | ||
+ | var positionOptions = { enableHighAccuracy: | ||
+ | positionCallback = function( position ){ | ||
+ | logPosition( position ); | ||
+ | if( idEl(' | ||
+ | }, | ||
+ | positionErrorCallback = function( positionError ){ | ||
+ | switch(positionError){ | ||
+ | case 1: | ||
+ | | ||
+ | | ||
+ | case 2: | ||
+ | alert(" | ||
+ | break; | ||
+ | case 3: | ||
+ | alert(" | ||
+ | } | ||
+ | }; | ||
+ | | ||
+ | var watchID = geolocation.watchPosition( positionCallback, | ||
+ | log(" | ||
+ | | ||
+ | var simulationInterval = false; | ||
+ | var debugSimulationCount = 0; | ||
+ | }(); | ||
+ | |||
+ | </ | ||
+ | |||
+ | </ | ||
+ | </ | ||
+ | </ |