device-location.html 7.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8"/>
  5. <meta name="description" content=""/>
  6. <meta name="keywords" content="扫码支付,线上投币,运营数据,物联网"/>
  7. <meta name="format-detection" content="telphone=no,email=no"/>
  8. <meta name="viewport"
  9. content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
  10. <meta http-equiv="pragma" content="no-cache">
  11. <meta http-equiv="cache-control" content="no-cache">
  12. <meta http-equiv="expires" content="0">
  13. <title>设备地理位置</title>
  14. <link rel="stylesheet" href="https://cdn.washpayer.com/components/lib/mui.min.css"/>
  15. <link rel="stylesheet" href="../components/custom/css/common.css"/>
  16. <link rel="stylesheet" href="css/xyf.common.min.css">
  17. <style>
  18. </style>
  19. </head>
  20. <body>
  21. <div class="map-container">
  22. <div id="allmap"></div>
  23. <div class="map-top">
  24. <input class="address-search" id="addressSearch" placeholder="输入地址"/>
  25. <i class="iconfont icon-location"></i>
  26. </div>
  27. <div class="address-pop"></div>
  28. <div class='center-mark'><i class='iconfont icon-location-b c-primary'></i></div>
  29. <div class="set-current-location iconfont icon-location-c"></div>
  30. <div class="map-bottom">
  31. <div class="address-cancel btn">取消</div>
  32. <div class="address-ok btn">确定</div>
  33. </div>
  34. </div>
  35. <script src="https://cdn.washpayer.com/components/lib/jquery.min.js"></script>
  36. <script src="https://cdn.washpayer.com/components/lib/mui.min.js"></script>
  37. <script src="/components/custom/js/common.js"></script>
  38. <script type="text/javascript"
  39. src="https://api.map.baidu.com/api?v=2.0&ak=9579bf3cb9fdab9d6b49cdaf72c9907f"></script>
  40. <script src="https://res.wx.qq.com/open/js/jweixin-1.1.0.js"></script>
  41. <script src="../components/lib/gcoord.js"></script>
  42. <script src="js/xyf.common.js"></script>
  43. <script>
  44. var info = {
  45. lng: getQueryString("lng"),
  46. lat: getQueryString("lat"),
  47. logicalCode: getQueryString("logicalCode"),
  48. }
  49. initAddressSelect({lng: info.lng, lat: info.lat});//尝试初始化地图
  50. function closeMapDialog() {
  51. history.back();
  52. }
  53. // 下拉框选择附近的位置
  54. var selectPoint = {};
  55. var mapLoaded = false;
  56. function initAddressSelect(initPoint) {
  57. initPoint = new BMap.Point(initPoint.lng, initPoint.lat);
  58. if (mapLoaded) {
  59. // 避免多次加载
  60. return;
  61. }
  62. mapLoaded = true;
  63. //取消或确认选点
  64. $('.map-bottom .btn').off().tap(function () {
  65. if ($(this).hasClass("address-cancel")) {
  66. //点击取消
  67. closeMapDialog(true)
  68. } else if ($(this).hasClass("address-ok")) {
  69. saveLocation();
  70. }
  71. return false;
  72. });
  73. // 创建地理编码实例
  74. var myGeo = new BMap.Geocoder();
  75. // 根据坐标得到地址 并显示在界面、并移动地图
  76. function getAddressName(currentPoint) {
  77. // 根据坐标得到地址描述
  78. myGeo.getLocation(currentPoint, function (result) {
  79. if (result) {
  80. $(".address-pop").text(result.address + " (经度:" + currentPoint.lng + ",纬度:" + currentPoint.lat + ')').addClass('active')
  81. selectPoint = currentPoint;//【缓存当前经纬度,供后台保存】!!!
  82. map.centerAndZoom(currentPoint, 16);//移动地图到当前位置
  83. }
  84. });
  85. }
  86. // 获得当前位置 并移动地图和显示位置信息
  87. function getCurrent(callback) {
  88. getLocation(function (res) {
  89. if (res) {
  90. //转换为百度可用的坐标
  91. var pointList = gcoord.transform(
  92. [res.lng, res.lat],
  93. gcoord.GCJ02, // 当前坐标系
  94. gcoord.BD09 // 目标坐标系
  95. );
  96. var currentPoint = new BMap.Point(pointList[0], pointList[1]);
  97. if (callback) {
  98. callback(currentPoint);
  99. } else {
  100. getAddressName(currentPoint)
  101. }
  102. }
  103. });
  104. }
  105. var map = new BMap.Map("allmap");
  106. map.setMapStyle({
  107. styleJson: [
  108. {
  109. "featureType": "all",
  110. "elementType": "labels.text.fill",
  111. "stylers": {
  112. "color": "#888888"
  113. }
  114. },
  115. {
  116. "featureType": "poilabel",
  117. "elementType": "labels.icon",
  118. "stylers": {
  119. "visibility": "off"
  120. }
  121. }
  122. ]
  123. });
  124. map.addEventListener("touchstart", function () {
  125. $("#addressSearch").blur();
  126. });
  127. map.addEventListener("dragstart", function () {
  128. });
  129. map.addEventListener("dragend", function () {
  130. var point = map.getCenter();
  131. getAddressName(point)
  132. });
  133. map.addEventListener("zoomend", function () {
  134. var point = map.getCenter();
  135. getAddressName(point)
  136. });
  137. // 搜索输入
  138. var isFirst = true;
  139. //地址搜索建议,location参数表示根据当前区域进行搜索
  140. var ac = new BMap.Autocomplete({
  141. "input": "addressSearch", location: {}, "onSearchComplete": function (result) {
  142. if (isFirst) {
  143. $(".tangram-suggestion-main").hide();
  144. isFirst = false;
  145. }
  146. }
  147. });
  148. //鼠标点击下拉列表后的事件
  149. ac.addEventListener("onconfirm", function (e) {
  150. $("#addressSearch").blur();
  151. var _value = e.item.value;
  152. var myValue = _value.street + _value.business;
  153. var detail = _value.province + _value.city + _value.district + myValue
  154. // 根据详细地址得到坐标
  155. myGeo.getPoint(detail, function (result) {
  156. selectPoint = result;
  157. if (!selectPoint) {
  158. } else {
  159. map.centerAndZoom(selectPoint, 16);
  160. $(".address-pop").text(detail + " (经度:" + selectPoint.lng + ",纬度:" + selectPoint.lat + ')').addClass('active')
  161. }
  162. });
  163. return myValue;
  164. });
  165. // 定位按钮事件
  166. $(".set-current-location").click(function () {
  167. getCurrent();
  168. });
  169. // 初始化移动到 存储点
  170. if (initPoint.lat) {
  171. getAddressName(initPoint);
  172. } else {
  173. getCurrent();
  174. }
  175. }
  176. //保存位置信息
  177. function saveLocation() {
  178. if (!selectPoint) {
  179. mui.toast("请先定位!");
  180. }
  181. var data = {
  182. 'logicalCode': info.logicalCode,
  183. 'lng': selectPoint.lng,
  184. 'lat': selectPoint.lat
  185. };
  186. myAjax({
  187. url: "/device/updateLocation",
  188. type: "POST",
  189. mask: false,
  190. async: true,
  191. timeout: 70000,
  192. success: function (res) {
  193. if (res.result == 1) {
  194. mui.toast("上报成功!");
  195. setTimeout(function () {
  196. history.back()
  197. }, 1000);
  198. }
  199. },
  200. data: data,
  201. dataType: 'json'
  202. });
  203. }
  204. </script>
  205. </body>
  206. </html>