baidu.html 8.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  5. <title>地址选择器</title>
  6. <link rel="stylesheet" href="__CDN__/assets/css/frontend.min.css"/>
  7. <link rel="stylesheet" href="__CDN__/assets/libs/font-awesome/css/font-awesome.min.css"/>
  8. <style type="text/css">
  9. body {
  10. margin: 0;
  11. padding: 0;
  12. }
  13. #container {
  14. position: absolute;
  15. left: 0;
  16. top: 0;
  17. right: 0;
  18. bottom: 0;
  19. }
  20. .confirm {
  21. position: absolute;
  22. bottom: 30px;
  23. right: 4%;
  24. z-index: 99;
  25. height: 50px;
  26. width: 50px;
  27. line-height: 50px;
  28. font-size: 15px;
  29. text-align: center;
  30. background-color: white;
  31. background: #1ABC9C;
  32. color: white;
  33. border: none;
  34. cursor: pointer;
  35. border-radius: 50%;
  36. }
  37. .search {
  38. position: absolute;
  39. width: 400px;
  40. top: 0;
  41. left: 50%;
  42. padding: 5px;
  43. margin-left: -200px;
  44. }
  45. label.BMapLabel {
  46. max-width: inherit;
  47. padding: .75rem 1.25rem;
  48. margin-bottom: 1rem;
  49. background-color: white;
  50. width: auto;
  51. min-width: 22rem;
  52. border: none;
  53. box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);
  54. }
  55. </style>
  56. </head>
  57. <body>
  58. <div class="search">
  59. <div class="input-group">
  60. <input type="text" id="place" name="q" class="form-control" placeholder="输入地点"/>
  61. <div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
  62. <span class="input-group-btn">
  63. <button type="button" name="search" id="search-btn" class="btn btn-success">
  64. <i class="fa fa-search"></i>
  65. </button>
  66. </span>
  67. </div>
  68. </div>
  69. <div class="confirm">确定</div>
  70. <div id="container"></div>
  71. <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak={$config.baidukey|default=''}"></script>
  72. <script src="__CDN__/assets/libs/jquery/dist/jquery.min.js"></script>
  73. <script src="__CDN__/assets/addons/address/js/gcoord.min.js"></script>
  74. <script type="text/javascript">
  75. $(function () {
  76. var map, marker, point, fromtype, totype;
  77. var zoom = parseInt("{$zoom}");
  78. var address = "{$address|htmlentities}";
  79. var lng = Number("{$lng}");
  80. var lat = Number("{$lat}");
  81. fromtype = "BD09";
  82. totype = "{$config.coordtype|default='DEFAULT'}"
  83. totype = totype === 'DEFAULT' ? "BD09" : totype;
  84. if (lng && lat && fromtype !== totype) {
  85. var result = gcoord.transform([lng, lat], gcoord[totype], gcoord[fromtype]);
  86. lng = result[0] || lng;
  87. lat = result[1] || lat;
  88. }
  89. var geocoder = new BMap.Geocoder();
  90. var addPointMarker = function (point, addr) {
  91. deletePoint();
  92. addPoint(point);
  93. if (addr) {
  94. addMarker(point, addr);
  95. } else {
  96. geocoder.getLocation(point, function (rs) {
  97. addMarker(point, rs.address);
  98. });
  99. }
  100. };
  101. var addPoint = function (point) {
  102. lng = point.lng;
  103. lat = point.lat;
  104. marker = new BMap.Marker(point);
  105. map.addOverlay(marker);
  106. map.panTo(point);
  107. };
  108. var addMarker = function (point, addr) {
  109. address = addr;
  110. // var labelhtml = '<div class="info">地址:' + address + '<br>经度:' + point.lng + '<br>纬度:' + point.lat + '</div>';
  111. var labelhtml = '<div class="info">地址:' + address + '</div>';
  112. var label = new BMap.Label(labelhtml, {offset: new BMap.Size(16, 20)});
  113. label.setStyle({
  114. border: 'none',
  115. padding: '.75rem 1.25rem'
  116. });
  117. marker.setLabel(label);
  118. };
  119. var deletePoint = function () {
  120. var allOverlay = map.getOverlays();
  121. for (var i = 0; i < allOverlay.length; i++) {
  122. map.removeOverlay(allOverlay[i]);
  123. }
  124. };
  125. var init = function () {
  126. map = new BMap.Map("container"); // 创建地图实例
  127. var point = new BMap.Point(lng, lat); // 创建点坐标
  128. map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
  129. map.centerAndZoom(point, zoom); // 初始化地图,设置中心点坐标和地图级别
  130. var size = new BMap.Size(10, 20);
  131. map.addControl(new BMap.CityListControl({
  132. anchor: BMAP_ANCHOR_TOP_LEFT,
  133. offset: size,
  134. }));
  135. if ("{$lng}" != '' && "{$lat}" != '') {
  136. addPointMarker(point, address);
  137. }
  138. ac = new BMap.Autocomplete({"input": "place", "location": map}); //建立一个自动完成的对象
  139. ac.addEventListener("onhighlight", function (e) { //鼠标放在下拉列表上的事件
  140. var str = "";
  141. var _value = e.fromitem.value;
  142. var value = "";
  143. if (e.fromitem.index > -1) {
  144. value = _value.province + _value.city + _value.district + _value.street + _value.business;
  145. }
  146. str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;
  147. value = "";
  148. if (e.toitem.index > -1) {
  149. _value = e.toitem.value;
  150. value = _value.province + _value.city + _value.district + _value.street + _value.business;
  151. }
  152. str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
  153. $("#searchResultPanel").html(str);
  154. });
  155. ac.addEventListener("onconfirm", function (e) { //鼠标点击下拉列表后的事件
  156. var _value = e.item.value;
  157. myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
  158. $("#searchResultPanel").html("onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue);
  159. setPlace();
  160. });
  161. function setPlace(text) {
  162. map.clearOverlays(); //清除地图上所有覆盖物
  163. function myFun() {
  164. var results = local.getResults();
  165. var result = local.getResults().getPoi(0);
  166. var point = result.point; //获取第一个智能搜索的结果
  167. map.centerAndZoom(point, 18);
  168. // map.addOverlay(new BMap.Marker(point)); //添加标注
  169. if (result.type != 0) {
  170. address = results.province + results.city + result.address;
  171. } else {
  172. address = result.address;
  173. }
  174. addPointMarker(point, address);
  175. }
  176. var local = new BMap.LocalSearch(map, { //智能搜索
  177. onSearchComplete: myFun
  178. });
  179. local.search(text || myValue);
  180. }
  181. map.addEventListener("click", function (e) {
  182. //通过点击百度地图,可以获取到对应的point, 由point的lng、lat属性就可以获取对应的经度纬度
  183. addPointMarker(e.point);
  184. });
  185. //点击搜索按钮
  186. $(document).on('click', '#search-btn', function () {
  187. if ($("#place").val() == '')
  188. return;
  189. setPlace($("#place").val());
  190. });
  191. };
  192. var close = function (data) {
  193. var index = parent.Layer.getFrameIndex(window.name);
  194. var callback = parent.$("#layui-layer" + index).data("callback");
  195. //再执行关闭
  196. parent.Layer.close(index);
  197. //再调用回传函数
  198. if (typeof callback === 'function') {
  199. callback.call(undefined, data);
  200. }
  201. };
  202. //点击确定后执行回调赋值
  203. $(document).on('click', '.confirm', function () {
  204. var zoom = map.getZoom();
  205. var data = {lat: lat, lng: lng, zoom: zoom, address: address};
  206. if (fromtype !== totype) {
  207. var result = gcoord.transform([data.lng, data.lat], gcoord[fromtype], gcoord[totype]);
  208. data.lng = (result[0] || data.lng).toFixed(5);
  209. data.lat = (result[1] || data.lat).toFixed(5);
  210. console.log(data, result, fromtype, totype);
  211. }
  212. close(data);
  213. });
  214. init();
  215. });
  216. </script>
  217. </body>
  218. </html>