qq_map.js 6.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204
  1. //author 周
  2. // var map, marker, infoWindow, geolocation, geocoder;//地图加载默认参数
  3. mapClass = function(id, lnglat, map_success_back){
  4. /*******************************************************地图加载事件start**********************************************************/
  5. //加载地图,调用浏览器定位服务
  6. _this = this;
  7. this.init(id, lnglat, map_success_back);//初始化函数
  8. };
  9. mapClass.prototype = {
  10. init : async function(id, lnglat, map_success_back){
  11. _this.setAttr();
  12. _this.map_callback = map_success_back;
  13. var center;
  14. if(lnglat["lat"] != ''|| lnglat["lng"] != '' ){
  15. center = new TMap.LatLng(lnglat.lat,lnglat.lng);
  16. } else {
  17. await _this.getCurrentPosition(function(res){
  18. if (res.status == 0) {
  19. var location = res.result.location;
  20. center = new TMap.LatLng(location.lat, location.lng);
  21. }
  22. })
  23. }
  24. _this.map = new TMap.Map(document.getElementById(id), {
  25. center: center,//设置地图中心点坐标
  26. zoom: 17 //设置地图缩放级别
  27. });
  28. // 创建中心点标记
  29. _this.marker = new TMap.MultiMarker({
  30. map: _this.map,
  31. geometries: [
  32. {
  33. id: 'center',
  34. position: _this.map.getCenter(),
  35. }
  36. ]
  37. });
  38. _this.infoWindow = new TMap.InfoWindow({
  39. content: "", //信息窗口内容
  40. position: center,//显示信息窗口的坐标
  41. map: _this.map,
  42. offset: {x: 0, y: -50}
  43. });
  44. _this.infoWindow.close(); // 初始化关闭窗体
  45. _this.map.on('click',function(e){
  46. if(_this.map_click){
  47. _this.map_change = false;
  48. _this.getAddress(e.latLng,function(result){
  49. _this.markerMove(e.latLng, result.address, result.addressComponents);
  50. })
  51. }else{
  52. return false;
  53. }
  54. })
  55. if(map_success_back != undefined){
  56. map_success_back(_this);
  57. }
  58. },
  59. getAddress(LatLng, callback){
  60. var geocoder = new qq.maps.Geocoder({
  61. complete:function(result){
  62. var detail = result.detail;
  63. callback(detail);
  64. }
  65. });
  66. var coord=new qq.maps.LatLng(LatLng.lat,LatLng.lng);
  67. geocoder.getAddress(coord)
  68. },
  69. getCurrentPosition : async function (callback){
  70. var ipLocation = new TMap.service.IPLocation();
  71. await ipLocation.locate({}).then(function(res){
  72. callback(res)
  73. })
  74. },
  75. markerMove : function(position, address, data){
  76. var center = new TMap.LatLng(position.lat, position.lng);
  77. var address_detail = address;
  78. address_detail = address_detail.replace(data.country,'');
  79. address_detail = address_detail.replace(data.province,'');
  80. address_detail = address_detail.replace(data.city,'');
  81. address_detail = address_detail.replace(data.district,'');
  82. _this.marker.updateGeometries([
  83. {
  84. id: 'center',
  85. position: center
  86. }
  87. ]);
  88. _this.infoWindow.open()
  89. _this.infoWindow.setPosition(center);
  90. _this.infoWindow.setContent("<p>当前位置:<span class='text-color'>" + address + "</span>");
  91. _this.map.setCenter(position);
  92. _this.address.province_name = data.province;
  93. if(data.city == ""){
  94. _this.address.city_name = data.province;
  95. }else{
  96. _this.address.city_name = data.city;
  97. }
  98. _this.address.district_name = data.district;
  99. _this.address.township_name = data.street;
  100. _this.address.area = _this.address.province_name+","+_this.address.city_name+","+_this.address.district_name+","+_this.address.township_name;
  101. _this.address.longitude = position.lng;
  102. _this.address.latitude = position.lat;
  103. _this.address.address = address_detail;
  104. if(!_this.map_change){
  105. mapChangeCallBack();
  106. }else{
  107. selectCallBack();
  108. }
  109. },
  110. mapChange : function(address){
  111. if (_this.map_change) {
  112. var province_name = _this.address.province > 0 ? _this.address.province_name : '';
  113. var city_name = _this.address.province > 0 && _this.address.city > 0 ? _this.address.city_name : '';
  114. var districts_name = _this.address.province > 0 && _this.address.city > 0 && _this.address.district > 0 ? _this.address.district_name : '';
  115. var address_detail = _this.address.province > 0 && _this.address.city > 0 && _this.address.district > 0 ? _this.address.detail_address : '';
  116. if(!address){
  117. address = province_name +','+ city_name +','+ districts_name +','+ address_detail;
  118. }
  119. _this.getLocation(address, function (result) {
  120. _this.markerMove(result.location, result.address, result.addressComponents);
  121. });
  122. }
  123. },
  124. getLocation(address, callback){
  125. var callbacks = {
  126. complete:function(result){
  127. var detail = result.detail;
  128. callback(detail);
  129. }
  130. }
  131. var geocoder = new qq.maps.Geocoder(callbacks);
  132. geocoder.getLocation(address);
  133. },
  134. setAttr : function(){
  135. _this.map = "";
  136. _this.marker = "";
  137. _this.infoWindow = "";
  138. _this.geolocation = "";
  139. _this.geocoder = "";
  140. _this.location = false;
  141. _this.map_change = true;
  142. _this.map_click = true;
  143. _this.zoom = 15;
  144. _this.address = {
  145. province : "",
  146. province_name : "",
  147. city : "",
  148. city_name : "",
  149. district : "",
  150. district_name : "",
  151. township : "",
  152. township_name : "",
  153. address : "",
  154. longitude : "",
  155. latitude : "",
  156. area : ""
  157. };
  158. },
  159. destroy : function(){
  160. _this.map.destroy( );//销毁地图
  161. },
  162. setMapCircle : function(radius_num, position){
  163. if(radius_num == undefined && radius_num <= 0){
  164. return;
  165. }
  166. _this.map.clearMap();
  167. // var circle_arr = map.getAllOverlays('circle');
  168. // if(circle_arr.length > 0){{
  169. // map.remove(circle)
  170. // }
  171. if(position != undefined){
  172. var center_position = new AMap.LngLat(position['lon'], position['lat'])
  173. }else{
  174. var center_position = _this.marker.getPosition();
  175. }
  176. var circle = new AMap.Circle({
  177. center: center_position,// 圆心位置
  178. radius: radius_num*1000, //半径
  179. strokeColor: "#F33", //线颜色
  180. strokeOpacity: 1, //线透明度
  181. strokeWeight: 3, //线粗细度
  182. fillColor: "#ee2200", //填充颜色
  183. fillOpacity: 0.35//填充透明度
  184. });
  185. _this.map.add(_this.marker);
  186. circle.setMap(_this.map);
  187. }
  188. }