Nenhuma Descrição

index.js 11KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288
  1. window.onload = function() {
  2. //键盘登录事件
  3. $("#sourceaddress").bind('keypress', function(event) {
  4. if($('#sourcearea').val() == "") {
  5. layer.msg("请选择区", {
  6. time: 1500,
  7. icon: 5
  8. });
  9. return;
  10. }
  11. if($("#sourceaddress").val() == "") {
  12. layer.msg("请填写详细地址", {
  13. time: 1500,
  14. icon: 5
  15. });
  16. return;
  17. }
  18. var address = '河南省安阳市' + $('#sourcearea').find("option:selected").text() + $("#sourceaddress").val();
  19. setPlace(address);
  20. });
  21. //市区选择控件
  22. $('#sourcearea').change(function(obj) {
  23. if($('#sourcearea').val() == "") {
  24. alert("请选择省市区");
  25. return;
  26. }
  27. $("#sourceaddress").val("")
  28. //alert("1")
  29. //$(".store_Lng").val("");
  30. //$(".store_Lat").val("");
  31. earth();
  32. });
  33. //初始化方法
  34. function loadData() {
  35. }
  36. //#region 百度地图相关代码
  37. /*************************百度地图 **************************/
  38. function loadDefulatMap(callback) {
  39. var longiTude=$(".store_Lng").val();
  40. var latitude=$(".store_Lat").val();
  41. var point = new BMap.Point($(".store_Lng").val(), $(".store_Lat").val()); // 创建点坐标
  42. map.centerAndZoom(point, 15); // 初始化地图,设置中心点坐标和地图级别
  43. map.addControl(new BMap.NavigationControl());
  44. map.addControl(new BMap.ScaleControl());
  45. map.addControl(new BMap.OverviewMapControl());
  46. if($(".store_Lng").val()!=114.352482){
  47. createMarker(point);
  48. }
  49. //map.addControl(new BMap.MapTypeControl()); //不同类型的百度地图
  50. map.setCurrentCity("安阳"); // 仅当设置城市信息时,MapTypeControl的切换功能才能可用
  51. //地图加载完成后加载数据
  52. callback();
  53. }
  54. //市区下拉框选择事件
  55. //earth();
  56. function earth() {
  57. var address = '河南省安阳市' + $('#sourcearea').find("option:selected").text();;
  58. //var address = '河南省安阳市睢阳区'
  59. if(address != "") {
  60. var city = '安阳市';
  61. // 创建地址解析器实例
  62. // var myGeo = new BMap.Geocoder();
  63. myGeo.getPoint(address, function(point) {
  64. if(point) {
  65. //定位到区 ,级别显示12
  66. map.centerAndZoom(point, 12);
  67. //删除选点
  68. map.clearOverlays();
  69. } else {
  70. // alert("您选择地址没有解析到结果!");
  71. }
  72. }, city);
  73. }
  74. }
  75. function Autocomplete() {
  76. //建立一个自动完成的对象
  77. var ac = new BMap.Autocomplete({
  78. "input": "baiduAddress",
  79. "location": map
  80. });
  81. ac.addEventListener("onhighlight", function(e) { //鼠标放在下拉列表上的事件
  82. var str = "";
  83. var _value = e.fromitem.value;
  84. var value = "";
  85. if(e.fromitem.index > -1) {
  86. value = _value.province + _value.city + _value.district + _value.street + _value.business;
  87. }
  88. str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;
  89. value = "";
  90. if(e.toitem.index > -1) {
  91. _value = e.toitem.value;
  92. value = _value.province + _value.city + _value.district + _value.street + _value.business;
  93. }
  94. str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
  95. $(".area_tip").innerHTML = str;
  96. });
  97. ac.addEventListener("onconfirm", function(e) { //鼠标点击下拉列表后的事件
  98. var _value = e.item.value;
  99. var myValue = _value.street + _value.business;
  100. $(".area_tip").innerHTML = "onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
  101. setPlace(myValue);
  102. })
  103. }
  104. //地图选点点击事件
  105. function clickCoordinate(e) {
  106. var point = e.point;
  107. createMarker(point);
  108. console.log(e.point);
  109. }
  110. function setPlace(value) {
  111. function myFun() {
  112. if(local.getResults().getPoi(0)) {
  113. var point = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
  114. createMarker(point);
  115. } else {
  116. alert("未搜索到结果,请重新输入");
  117. }
  118. }
  119. var local = new BMap.LocalSearch(map, { //智能搜索
  120. onSearchComplete: myFun
  121. });
  122. local.search(value);
  123. }
  124. var baiduParam = {
  125. oldPoint: null //记录旧值,用于地图拖拽失败后回到原来位置
  126. ,
  127. Exceed_Error: "定位地址失败,您搜索或定位超出县级范围,请重新选择定位",
  128. SelectRegion_Error: "定位地址失败,您搜索或定位超出县级范围,请先选择省市区",
  129. Location_Div: "<div id='descConten'>已将坐标定位为<hr/>{address}<br/><small style='color: #858585;line-height: 24px;'>地址:{title}</small><br/><br/><input type='button' value='确定' id='saveLngLat' style=' background: rgb(135,205,208); display: none; border: none;color: white;height: 30px;width: 60px;border-radius: 4px;' ></div> ",
  130. Location_Sure_Div: "<img style='width:20px;top: 5px;position: relative;' src='img/success.png' />已将坐标定位为<hr/>{address}<br/><small style='color: #858585;line-height: 24px;'>地址:{title}</small><br/><br/>"
  131. }
  132. function createMarker(point, isLoad) {
  133. //反向解析地址
  134. myGeo.getLocation(point, function(rs) {
  135. map.clearOverlays(); //清除之前所有的标志
  136. //红点开始
  137. var marker = new BMap.Marker(point); // 创建标注
  138. map.addOverlay(marker); // 将标注添加到地图中
  139. marker.enableDragging(); //可拖拽 自定义拖拽
  140. //拖拽前事件
  141. marker.addEventListener("dragstart", function(e) {
  142. baiduParam.oldPoint = e.point;
  143. })
  144. //拖拽完成事件
  145. marker.addEventListener("dragend", function(e) {
  146. createMarker(e.point);
  147. })
  148. //红点完成
  149. baiduParam.oldPoint = null;
  150. /******** 图层初始化 ********/
  151. /**图层样式文字处理开始**/
  152. var html = baiduParam.Location_Div;
  153. // if(isLoad == true) {
  154. // map.centerAndZoom(point, map.getZoom()); //重置地图位置
  155. // html = baiduParam.Location_Sure_Div;
  156. // }
  157. //如果缩放等级小于当前的 ,则为18
  158. if(map.getZoom() < 18) {
  159. map.setZoom(18);
  160. }
  161. //解析地址
  162. var rsaddress = rs.address;
  163. console.log(rs);
  164. console.log(rs.addressComponents.district)
  165. if (rs.addressComponents.district=="睢阳区") {
  166. $('#sourcearea').val("2");
  167. }else if (rs.addressComponents.district=="梁园区"){
  168. $('#sourcearea').val("3");
  169. }else if (rs.addressComponents.district=="永城市"){
  170. $('#sourcearea').val("4");
  171. }else if (rs.addressComponents.district=="民权县"){
  172. $('#sourcearea').val("5");
  173. }else if (rs.addressComponents.district=="睢县"){
  174. $('#sourcearea').val("6");
  175. }else if (rs.addressComponents.district=="宁陵县"){
  176. $('#sourcearea').val("7");
  177. }else if (rs.addressComponents.district=="柘城县"){
  178. $('#sourcearea').val("8");
  179. }else if (rs.addressComponents.district=="虞城县"){
  180. $('#sourcearea').val("9");
  181. }else if (rs.addressComponents.district=="夏邑县"){
  182. $('#sourcearea').val("10");
  183. }else if (rs.addressComponents.district=="城乡一体化示范区"){
  184. $('#sourcearea').val("11");
  185. }
  186. $('#sourcearea').find("option:selected").text(rs.addressComponents.district);
  187. //$('#sourcearea').find("option:selected").val(rs.addressComponents.district);
  188. if (rs.surroundingPois.length>0) {
  189. $('#sourceaddress').val(rs.surroundingPois[0].address+'-'+rs.surroundingPois[0].title);
  190. }else{
  191. $('#sourceaddress').val(rs.addressComponents.street);
  192. }
  193. $(".store_Lng").val(rs.point.lng);
  194. $(".store_Lat").val(rs.point.lat);
  195. var rstitle = rs.surroundingPois[0] != null ? rs.surroundingPois[0].title : "";
  196. html = html.replace("{address}", rsaddress).replace("{title}", rstitle);
  197. /**图层样式文字处理结束**/
  198. var infoWindow = new BMap.InfoWindow(html, {
  199. offset: {
  200. width: 0,
  201. height: -25
  202. }
  203. });
  204. // 创建信息窗口对象
  205. map.openInfoWindow(infoWindow, point); //开启信息窗口
  206. //确定事件绑定
  207. infoWindow.addEventListener("open", function(a) {
  208. $("#saveLngLat").unbind("click");
  209. $("#saveLngLat").click(function() {
  210. infoWindow.setContent("<img style='width:20px;top: -2px;position: relative;' src='img/success.png' />已将坐标定位为<hr/>" + rs.address + "<br/><small style='color: #858585;line-height: 24px;'>地址:" + (rs.surroundingPois[0] != null ? rs.surroundingPois[0].title : "") + "</small><br/><br/>");
  211. $(".store_Lng").val(rs.point.lng);
  212. $(".store_Lat").val(rs.point.lat);
  213. })
  214. })
  215. infoWindow.redraw(function() {
  216. $("#saveLngLat").unbind("click");
  217. $("#saveLngLat").click(function() {
  218. infoWindow.setContent("<img style='width:20px;top: -2px;position: relative;' src='img/success.png' />已将坐标定位为<hr/>" + rs.address + "<br/><small style='color: #858585;line-height: 24px;'>地址:" + (rs.surroundingPois[0] != null ? rs.surroundingPois[0].title : "") + "</small><br/><br/>");
  219. $(".store_Lng").val(rs.point.lng);
  220. $(".store_Lat").val(rs.point.lat);
  221. })
  222. });
  223. /******** 图层初始化 ********/
  224. });
  225. }
  226. //#region /****查询控件类****/
  227. function BigZoomControl() {
  228. // 设置默认停靠位置和偏移量
  229. this.defaultAnchor = BMAP_ANCHOR_TOP_RIGHT;
  230. this.defaultOffset = new BMap.Size(150, 20);
  231. }
  232. // 通过JavaScript的prototype属性继承于BMap.Control
  233. BigZoomControl.prototype = new BMap.Control();
  234. // 自定义控件必须实现自己的initialize方法,并且将控件的DOM元素返回
  235. // 在本方法中创建个div元素作为控件的容器,并将其添加到地图容器中
  236. BigZoomControl.prototype.initialize = function(map) {
  237. // 创建一个DOM元素
  238. var div = document.createElement("div");
  239. // 设置样式
  240. div.style.cursor = "pointer";
  241. div.style.margin = "0 auto";
  242. div.style.backgroundColor = "white";
  243. div.innerHTML = "<div style='display: none'><input type='text' id = 'baiduAddress' name = 'baiduAddress' style='width: 350px;height: 33px;text-indent:1em;float:left;border: 1px solid #D2D2D2!important;border-right:none;' placeholder='输入门店详细地址, 越详细定位越精准' /><div class='searchMap' style='border:1px solid #f50;background-color:#f50;width:60px;height:33px;float:left;'></div><img class='searchMap' style='height: 22px;position: absolute;right: 18px;top: 7px;'/><div style='clear:both'></div></div>";
  244. // 添加DOM元素到地图中
  245. map.getContainer().appendChild(div);
  246. // 将DOM元素返回
  247. return div;
  248. }
  249. //#endregion
  250. //#endregion
  251. //#region 百度地图初始化
  252. /****************百度地图初始化开始****************/
  253. //去除默认点击
  254. var map = new BMap.Map("myMap", {
  255. enableMapClick: false
  256. });
  257. map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
  258. // 创建地址解析器实例
  259. var myGeo = new BMap.Geocoder();
  260. loadDefulatMap(loadData); //初始化地图以及加载初始化数据
  261. // 创建控件
  262. var myZoomCtrl = new BigZoomControl();
  263. //// 查询控件类到地图当中
  264. map.addControl(myZoomCtrl);
  265. //查询控件的点击事件
  266. // $(".searchMap").click(function () {
  267. // setPlace($("#baiduAddress").val());
  268. // });
  269. Autocomplete(); //构建自动
  270. bindEvent();
  271. function bindEvent() {
  272. //查询百度地图
  273. map.addEventListener("click", clickCoordinate); //地图点击事件
  274. }
  275. /****************百度地图初始化完成****************/
  276. //#endregion
  277. }