<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/> <meta name="apple-mobile-web-app-capable" content="yes" /> <title>Map</title> <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.8/js/dojo/dijit/themes/claro/claro.css"> <style type='text/css'> body{ padding:0; margin:0; } html,body,#map,#mainView{ height:100%; } #navPane{ display:none; } </style> <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.0"></script> <script type='text/javascript'> dojo.require("esri.map"); dojo.require("esri.tasks.geometry"); dojo.addOnLoad(init); var map,geometryService; var placesKey='Google Key'; function init(){ esri.config.defaults.io.proxyUrl = 'http://localhost/~kell3008/proxy/proxy.php'; geometryService = new esri.tasks.GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer"); var supportsOrientationChange = "onorientationchange" in window, orientationEvent = supportsOrientationChange ? "orientationchange" : "resize"; window.addEventListener(orientationEvent, function() { orientationChanged(); }, false); map = new esri.Map('map'); //find location if(navigator.geolocation){ navigator.geolocation.getCurrentPosition(function(location){ var pt = esri.geometry.geographicToWebMercator(new esri.geometry.Point(location.coords.longitude, location.coords.latitude)); var symbol = new esri.symbol.PictureMarkerSymbol({"angle":0,"xoffset":0,"yoffset":0,"type":"esriPMS","url":"http://static.arcgis.com/images/Symbols/Shapes/BlueStarLargeB.png","contentType":"image/png","width":18,"height":18}); graphic = new esri.Graphic(pt, symbol); map.graphics.add(graphic); map.centerAndZoom(pt,14); var loc = location.coords.latitude + ',' + location.coords.longitude; findPlaces(loc); //display accuracy var params = new esri.tasks.BufferParameters(); params.geometries = [pt]; params.distances = [location.coords.accuracy]; //accuracy in meters params.unit = esri.tasks.GeometryService.UNIT_METER; params.outSpatialReference = map.spatialReference; geometryService.buffer(params,function(results){ if(results.length > 0){ var symbol = new esri.symbol.SimpleFillSymbol(); symbol.setColor(new dojo.Color([100,100,100,0.25])); symbol.setOutline(null); var graphic = new esri.Graphic(results[0],symbol); map.graphics.add(graphic); } }); },function(positionerror){ switch(positionerror.code){ case 0: console.log("Unknown error occurred"); break; case 1: console.log("Permission denied"); break; case 2: console.log("Unable to find current location"); break; case 3: console.log("Location request timed out"); break; } }); } var basemap = new esri.layers.ArcGISTiledMapServiceLayer('http://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer'); map.addLayer(basemap); } function orientationChanged(){ if(map){ map.reposition(); map.resize(); } } function findPlaces(location){ var placesUrl = 'https://maps.googleapis.com/maps/api/place/search/json'; var params ={ location:location, sensor:false, radius:5000, types:'book_store', key:placesKey, } var places = esri.request({ url:placesUrl, content:params, handleAs:'json' }); places.then(requestSucceeded,requestFailed); } function requestSucceeded(response){ dojo.forEach(response.results,function(result){ var pt = esri.geometry.geographicToWebMercator(new esri.geometry.Point(result.geometry.location.lng, result.geometry.location.lat,new esri.SpatialReference(4326))); console.log(result); var attr = {'name':result.name,'address':result.vicinity}; var symbol = new esri.symbol.PictureMarkerSymbol({"angle":0,"xoffset":0,"yoffset":0,"type":"esriPMS","url":result.icon,"contentType":"image/png","width":16,"height":16}); var infoTemplate = new esri.InfoTemplate('Books',"${*}"); graphic = new esri.Graphic(pt, symbol,attr,infoTemplate); map.graphics.add(graphic); }) } function requestFailed(response){ console.log(response); } </script> </head> <body class='claro'> <div id='mainView' dojoType='dojox.mobile.View' selected='true'> <div id='map'></div> </div> </body> </html>
Les membres connectés peuvent publier, suivre les mises à jour, et plus encore. Nouveau ici ? Inscrivez-vous gratuitement.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.
