location.html 2.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>SuperMap iClient for JavaScript</title>
  6. <style>
  7. #map{
  8. border:0px solid;
  9. }
  10. </style>
  11. <script type="text/javascript" src="js/cordova-2.7.0.js"></script>
  12. <script src="js/jquery.js"></script>
  13. <script src="libs/SuperMap.Include.js"></script>
  14. <script src="js/LocationControl.js"></script>
  15. <script type="text/javascript">
  16. var map, layer,markerLayer,locationCtrl;
  17. function init() {
  18. SuperMap.Util.setApp(true);
  19. map = new SuperMap.Map("map",{controls: [
  20. new SuperMap.Control.ScaleLine(),
  21. new SuperMap.Control.Zoom(),
  22. new SuperMap.Control.Navigation({dragPanOptions: {enableKinetic: true}})
  23. ]
  24. });
  25. layer = new SuperMap.Layer.CloudLayer();
  26. markerLayer = new SuperMap.Layer.Markers("Markers");
  27. map.addLayers([layer,markerLayer]);
  28. map.setCenter(new SuperMap.LonLat(11615044.272732, 4422334.5114479), 4);
  29. }
  30. function locating(){
  31. if(!locationCtrl){
  32. locationCtrl = new SuperMap.LocationControl();
  33. }
  34. locationCtrl.local(onSuccess,onError,5000);
  35. }
  36. // 获取位置信息成功时调用的回调函数
  37. function onSuccess(position) {
  38. transCoordinate(position.lon,position.lat,
  39. function(position){
  40. var lat = position.lat;
  41. var lon = position.lon;
  42. markerLayer.clearMarkers();
  43. var size = new SuperMap.Size(44, 33);
  44. var offset = new SuperMap.Pixel(-(size.w / 2), -size.h);
  45. var icon = new SuperMap.Icon("./img/mark.png", size, offset);
  46. markerLayer.addMarker(new SuperMap.Marker(new SuperMap.LonLat(lon, lat), icon));
  47. map.setCenter(new SuperMap.LonLat(lon, lat));
  48. },
  49. function(){
  50. alert("坐标转换失败!");
  51. }
  52. );
  53. }
  54. // onError回调函数
  55. function onError(msg) {
  56. alert(msg);
  57. }
  58. //云服务转换坐标
  59. function transCoordinate(lon,lat,onSuccess,onError){
  60. var urlCoordinate="http://services.supermapcloud.com/iserver/cloudhandler";
  61. var lon_Cloud = lon;
  62. var lat_Cloud = lat;
  63. var param = "{\"x\":" + lon_Cloud + ",\"y\":" + lat_Cloud + "}";
  64. var data = {"servicename":"coordinateService","methodname":"convertGPS2SM","parameter":param};
  65. jQuery.ajax({
  66. "dataType":"jsonp",
  67. "jsonp":"jsonp",
  68. "type":"GET",
  69. "url":urlCoordinate,
  70. "data":data,
  71. "success":function(onSuccess){
  72. return function(cb){
  73. var position = {
  74. "lon":cb.result[0].x,
  75. "lat":cb.result[0].y
  76. };
  77. onSuccess(position);
  78. }
  79. }(onSuccess),
  80. "error":onError
  81. });
  82. }
  83. document.addEventListener("deviceready",init,false);
  84. </script>
  85. </head>
  86. <body>
  87. <div id="map" style="position:absolute;left:0px;right:0px;width:100%;height:100%;"></div>
  88. <input id="button" style="position:absolute;right:5px;top:5px;z-index:999" value="定位" type="button" ontouchend="locating()"></input>
  89. </body>
  90. </html>