暫無描述

map1.js 14KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382
  1. var mapAdree="";
  2. var data_index='';
  3. var pointArray=[];
  4. window.onload = function() {
  5. //键盘登录事件
  6. $("#sourceaddress").bind('keypress', function(event) {
  7. if($('#sourcearea').val() == "") {
  8. layer.msg("请选择区", {
  9. time: 1500,
  10. icon: 5
  11. });
  12. return;
  13. }
  14. if($("#sourceaddress").val() == "") {
  15. layer.msg("请填写详细地址", {
  16. time: 1500,
  17. icon: 5
  18. });
  19. return;
  20. }
  21. var address = '河南省安阳市' + $('#sourcearea').find("option:selected").text() + $("#sourceaddress").val();
  22. setPlace(address);
  23. });
  24. $("#myMap").bind("contextmenu", function () {
  25. //alert("点击了右键");
  26. $(".map_bg").fadeIn();
  27. $("#mapSj").hide();
  28. //return false;
  29. });
  30. //市区选择控件
  31. $('.map_click').click(function(obj) {
  32. mapAdree=$(this).attr("index")
  33. data_index=$(this).attr('data_index');
  34. earth();
  35. });
  36. //数据为空加载地图
  37. function mapLoad(){
  38. var city = '安阳市';
  39. // 创建地址解析器实例
  40. var address = '河南省安阳'+mapAdree;
  41. var myGeo = new BMap.Geocoder();
  42. myGeo.getPoint(address, function(point) {
  43. if(point) {
  44. //定位到区 ,级别显示12
  45. map.centerAndZoom(point, 13);
  46. $(".store_Lng").val(point.lng);
  47. $(".store_Lat").val(point.lat);
  48. map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
  49. //删除选点
  50. map.clearOverlays();
  51. } else {
  52. // alert("您选择地址没有解析到结果!");
  53. }
  54. }, city);
  55. }
  56. // throungh()
  57. function throungh() {
  58. $.ajax({
  59. type: "get",
  60. url: huayi.config.callcenter_url + "/Info/GetHotspotMap",
  61. async: false,
  62. dataType: 'json',
  63. data: {
  64. token: $.cookie("token"),
  65. start:$('#time1').val() && $('#time1').val().split(' ~ ')[0], //=开始时间
  66. end:$('#time1').val() && $('#time1').val().split(' ~ ')[1], //=结束时间
  67. // sourcearea:$('#sourceAreas').val()
  68. sourcearea:data_index
  69. },
  70. success: function(result) {
  71. if(result.state.toLowerCase() == "success") {
  72. json_data = result.data;
  73. if(json_data.length==0){
  74. mapLoad();
  75. }else{
  76. for(var i = 0; i < json_data.length; i++) {
  77. var marker = new BMap.Marker(new BMap.Point(json_data[i][0], json_data[i][1])); // 创建点
  78. map.addOverlay(marker); //增加点
  79. pointArray[i] = new BMap.Point(json_data[i][0], json_data[i][1]);
  80. var content = json_data[i][2];
  81. addClickHandler(content, marker);
  82. //让所有点在视野范围内
  83. map.setViewport(pointArray);
  84. }
  85. }
  86. }
  87. }
  88. })
  89. }
  90. //初始化方法
  91. function loadData() {
  92. }
  93. //#region 百度地图相关代码
  94. /*************************百度地图 **************************/
  95. function loadDefulatMap(callback) {
  96. var longiTude=$(".store_Lng").val();
  97. var latitude=$(".store_Lat").val();
  98. console.log(longiTude)
  99. var point = new BMap.Point($(".store_Lng").val(), $(".store_Lat").val()); // 创建点坐标
  100. map.centerAndZoom(point, 15); // 初始化地图,设置中心点坐标和地图级别
  101. map.addControl(new BMap.NavigationControl());
  102. map.addControl(new BMap.ScaleControl());
  103. map.addControl(new BMap.OverviewMapControl());
  104. if($(".store_Lng").val()!=115.659773){
  105. createMarker(point);
  106. }
  107. map.setMapStyle({style:'googlelite'});
  108. //map.addControl(new BMap.MapTypeControl()); //不同类型的百度地图
  109. map.setCurrentCity("安阳"); // 仅当设置城市信息时,MapTypeControl的切换功能才能可用
  110. //地图加载完成后加载数据
  111. callback();
  112. }
  113. // var pointArray=[];
  114. //市区下拉框选择事件
  115. function earth() {
  116. $(".map_bg").hide();
  117. $("#mapSj").fadeIn();
  118. var address = '河南省安阳市' + mapAdree;
  119. //alert(address)
  120. //var address = '河南省安阳市睢阳区'
  121. if(address != "") {
  122. var city = '安阳市';
  123. // 创建地址解析器实例
  124. // var myGeo = new BMap.Geocoder();
  125. myGeo.getPoint(address, function(point) {
  126. if(point) {
  127. //定位到区 ,级别显示12
  128. map.centerAndZoom(point, 13);
  129. //删除选点
  130. map.clearOverlays();
  131. throungh();
  132. // for(var i = 0; i < json_data.length; i++) {
  133. // var marker = new BMap.Marker(new BMap.Point(json_data[i][0], json_data[i][1])); // 创建点
  134. // map.addOverlay(marker); //增加点
  135. // pointArray[i] = new BMap.Point(json_data[i][0], json_data[i][1]);
  136. // var content = json_data[i][2];
  137. // addClickHandler(content, marker);
  138. // }
  139. } else {
  140. alert("您选择地址没有解析到结果!");
  141. }
  142. }, city);
  143. }
  144. }
  145. function Autocomplete() {
  146. //建立一个自动完成的对象
  147. var ac = new BMap.Autocomplete({
  148. "input": "baiduAddress",
  149. "location": map
  150. });
  151. ac.addEventListener("onhighlight", function(e) { //鼠标放在下拉列表上的事件
  152. var str = "";
  153. var _value = e.fromitem.value;
  154. var value = "";
  155. if(e.fromitem.index > -1) {
  156. value = _value.province + _value.city + _value.district + _value.street + _value.business;
  157. }
  158. str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;
  159. value = "";
  160. if(e.toitem.index > -1) {
  161. _value = e.toitem.value;
  162. value = _value.province + _value.city + _value.district + _value.street + _value.business;
  163. }
  164. str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
  165. $(".area_tip").innerHTML = str;
  166. });
  167. ac.addEventListener("onconfirm", function(e) { //鼠标点击下拉列表后的事件
  168. var _value = e.item.value;
  169. var myValue = _value.street + _value.business;
  170. $(".area_tip").innerHTML = "onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
  171. setPlace(myValue);
  172. })
  173. }
  174. //地图选点点击事件
  175. function clickCoordinate(e) {
  176. var point = e.point;
  177. createMarker(point);
  178. console.log(e.point);
  179. }
  180. function setPlace(value) {
  181. function myFun() {
  182. if(local.getResults().getPoi(0)) {
  183. var point = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
  184. createMarker(point);
  185. } else {
  186. alert("未搜索到结果,请重新输入");
  187. }
  188. }
  189. var local = new BMap.LocalSearch(map, { //智能搜索
  190. onSearchComplete: myFun
  191. });
  192. local.search(value);
  193. }
  194. var baiduParam = {
  195. oldPoint: null //记录旧值,用于地图拖拽失败后回到原来位置
  196. ,
  197. Exceed_Error: "定位地址失败,您搜索或定位超出县级范围,请重新选择定位",
  198. SelectRegion_Error: "定位地址失败,您搜索或定位超出县级范围,请先选择省市区",
  199. 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> ",
  200. 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/>"
  201. }
  202. function addClickHandler(content, marker) {
  203. marker.addEventListener("click", function(e) {
  204. openInfo(content, e)
  205. });
  206. }
  207. function openInfo(content, e) {
  208. var p = e.target;
  209. var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
  210. // var infoWindow = new BMap.InfoWindow(content, opts); // 创建信息窗口对象
  211. var infoWindow = new BMap.InfoWindow(content); // 创建信息窗口对象
  212. map.openInfoWindow(infoWindow, point); //开启信息窗口
  213. }
  214. function createMarker(point, isLoad) {
  215. //反向解析地址
  216. myGeo.getLocation(point, function(rs) {
  217. map.clearOverlays(); //清除之前所有的标志
  218. //红点开始
  219. var marker = new BMap.Marker(point); // 创建标注
  220. map.addOverlay(marker); // 将标注添加到地图中
  221. marker.enableDragging(); //可拖拽 自定义拖拽
  222. //拖拽前事件
  223. marker.addEventListener("dragstart", function(e) {
  224. baiduParam.oldPoint = e.point;
  225. })
  226. //拖拽完成事件
  227. marker.addEventListener("dragend", function(e) {
  228. createMarker(e.point);
  229. })
  230. //红点完成
  231. baiduParam.oldPoint = null;
  232. /******** 图层初始化 ********/
  233. /**图层样式文字处理开始**/
  234. var html = baiduParam.Location_Div;
  235. // if(isLoad == true) {
  236. // map.centerAndZoom(point, map.getZoom()); //重置地图位置
  237. // html = baiduParam.Location_Sure_Div;
  238. // }
  239. //如果缩放等级小于当前的 ,则为18
  240. if(map.getZoom() < 18) {
  241. map.setZoom(13);
  242. }
  243. //解析地址
  244. var rsaddress = rs.address;
  245. console.log(rs,rsaddress);
  246. console.log(rs.addressComponents.district)
  247. // if (rs.addressComponents.district=="汤阴县") {
  248. // $('#sourcearea').val("2");
  249. // }else if (rs.addressComponents.district=="龙安区"){
  250. // $('#sourcearea').val("3");
  251. // }else if (rs.addressComponents.district=="滑县"){
  252. // $('#sourcearea').val("4");
  253. // }else if (rs.addressComponents.district=="北关区"){
  254. // $('#sourcearea').val("5");
  255. // }else if (rs.addressComponents.district=="林州市"){
  256. // $('#sourcearea').val("6");
  257. // }else if (rs.addressComponents.district=="殷都区"){
  258. // $('#sourcearea').val("7");
  259. // }else if (rs.addressComponents.district=="高新区"){
  260. // $('#sourcearea').val("8");
  261. // }else if (rs.addressComponents.district=="安阳县"){
  262. // $('#sourcearea').val("9");
  263. // }else if (rs.addressComponents.district=="内黄县"){
  264. // $('#sourcearea').val("10");
  265. // }else if (rs.addressComponents.district=="文峰区"){
  266. // $('#sourcearea').val("11");
  267. // }
  268. // $('#sourcearea').find("option:selected").text(rs.addressComponents.district);
  269. // //$('#sourcearea').find("option:selected").val(rs.addressComponents.district);
  270. // if (rs.surroundingPois.length>0) {
  271. // if (rs.addressComponents.street!="") {
  272. // $('#sourceaddress').val(rs.addressComponents.street+'-'+rs.surroundingPois[0].title);
  273. // }else{
  274. // $('#sourceaddress').val(rs.surroundingPois[0].title);
  275. // }
  276. // }else{
  277. // $('#sourceaddress').val(rs.addressComponents.street);
  278. // }
  279. $(".store_Lng").val(rs.point.lng);
  280. $(".store_Lat").val(rs.point.lat);
  281. var rstitle = rs.surroundingPois[0] != null ? rs.surroundingPois[0].title : "";
  282. html = html.replace("{address}", rsaddress).replace("{title}", rstitle);
  283. /**图层样式文字处理结束**/
  284. var infoWindow = new BMap.InfoWindow(html, {
  285. offset: {
  286. width: 0,
  287. height: -25
  288. }
  289. });
  290. // 创建信息窗口对象
  291. map.openInfoWindow(infoWindow, point); //开启信息窗口
  292. //确定事件绑定
  293. infoWindow.addEventListener("open", function(a) {
  294. $("#saveLngLat").unbind("click");
  295. $("#saveLngLat").click(function() {
  296. 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/>");
  297. $(".store_Lng").val(rs.point.lng);
  298. $(".store_Lat").val(rs.point.lat);
  299. })
  300. })
  301. infoWindow.redraw(function() {
  302. $("#saveLngLat").unbind("click");
  303. $("#saveLngLat").click(function() {
  304. 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/>");
  305. $(".store_Lng").val(rs.point.lng);
  306. $(".store_Lat").val(rs.point.lat);
  307. console.log($(".store_Lat").val(rs.point.lat))
  308. })
  309. });
  310. /******** 图层初始化 ********/
  311. });
  312. }
  313. //#region /****查询控件类****/
  314. function BigZoomControl() {
  315. // 设置默认停靠位置和偏移量
  316. this.defaultAnchor = BMAP_ANCHOR_TOP_RIGHT;
  317. this.defaultOffset = new BMap.Size(150, 20);
  318. }
  319. // 通过JavaScript的prototype属性继承于BMap.Control
  320. BigZoomControl.prototype = new BMap.Control();
  321. // 自定义控件必须实现自己的initialize方法,并且将控件的DOM元素返回
  322. // 在本方法中创建个div元素作为控件的容器,并将其添加到地图容器中
  323. BigZoomControl.prototype.initialize = function(map) {
  324. // 创建一个DOM元素
  325. var div = document.createElement("div");
  326. // 设置样式
  327. div.style.cursor = "pointer";
  328. div.style.margin = "0 auto";
  329. div.style.backgroundColor = "white";
  330. 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>";
  331. // 添加DOM元素到地图中
  332. map.getContainer().appendChild(div);
  333. // 将DOM元素返回
  334. return div;
  335. }
  336. //#endregion
  337. //#endregion
  338. //#region 百度地图初始化
  339. /****************百度地图初始化开始****************/
  340. //去除默认点击
  341. var map = new BMap.Map("myMap", {
  342. enableMapClick: false
  343. });
  344. map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
  345. // 创建地址解析器实例
  346. var myGeo = new BMap.Geocoder();
  347. loadDefulatMap(loadData); //初始化地图以及加载初始化数据
  348. // 创建控件
  349. var myZoomCtrl = new BigZoomControl();
  350. //// 查询控件类到地图当中
  351. map.addControl(myZoomCtrl);
  352. //查询控件的点击事件
  353. // $(".searchMap").click(function () {
  354. // setPlace($("#baiduAddress").val());
  355. // });
  356. Autocomplete(); //构建自动
  357. bindEvent();
  358. function bindEvent() {
  359. //查询百度地图
  360. map.addEventListener("click", clickCoordinate); //地图点击事件
  361. }
  362. /****************百度地图初始化完成****************/
  363. //#endregion
  364. }