map.vue 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178
  1. <template>
  2. <div class="mapItems">
  3. <div class="mapMasp" v-if="loadding">
  4. <div class="el-loading-spinner">
  5. <i class="el-icon-loading"></i>
  6. <div class="el-loading-text">地图加载中</div>
  7. </div>
  8. </div>
  9. <div class="topSelect">
  10. <div></div>
  11. </div>
  12. <div class="mapInit" id="mapInit"></div>
  13. </div>
  14. </template>
  15. <script>
  16. export default {
  17. data() {
  18. return {
  19. map: '',
  20. disCountry: '',
  21. placeSearch: '',
  22. district: null,
  23. marker: '',
  24. polygons: [],
  25. addressName: '', //地址查询名称
  26. poisArray: [],
  27. loadding: true
  28. };
  29. },
  30. mounted() {},
  31. computed: {},
  32. methods: {
  33. init() {
  34. this.map = new AMap.Map('mapInit', {
  35. resizeEnable: true, //是否监控地图容器尺寸变化
  36. zoom: 8, //初始化地图层级
  37. mapStyle: 'amap://styles/darkblue',
  38. defaultCursor: 'pointer'
  39. });
  40. //地图加载完成监听点击事件
  41. this.map.on('complete', () => {
  42. this.loadding = false;
  43. this.mapMak();
  44. this.mapClick();
  45. });
  46. },
  47. mapClick() {
  48. this.map.on('click', (ev) => {
  49. this.getAddress([ev.lnglat.lng, ev.lnglat.lat]);
  50. });
  51. },
  52. mapMak() {
  53. if (this.poisArray.length > 0) {
  54. this.poisArray.map((item) => {
  55. this.addIcon(item);
  56. });
  57. }
  58. },
  59. addIcon(item) {
  60. this.marker = new AMap.Marker({
  61. icon: new AMap.Icon({
  62. image: require('@assets/img/homePage/icon_point_community@2x.png'),
  63. size: new AMap.Size(40, 50),
  64. imageSize: new AMap.Size(40, 50)
  65. }),
  66. position: [item.longitude, item.latitude],
  67. map: this.map
  68. });
  69. this.marker.setLabel({
  70. offset: new AMap.Pixel(-15, 50),
  71. content: `${item.communityName}`
  72. });
  73. },
  74. //搜索区域
  75. districtMask(val) {
  76. if (!this.district) {
  77. //实例化DistrictSearch
  78. var opts = {
  79. subdistrict: 0, //获取边界不需要返回下级行政区
  80. extensions: 'all', //返回行政区边界坐标组等具体信息
  81. level: 'district' //查询行政级别为 市
  82. };
  83. this.district = new AMap.DistrictSearch(opts);
  84. }
  85. // this.district.setLevel(val);
  86. this.district.search(val, (status, result) => {
  87. this.map.remove(this.polygons); //清除上次结果
  88. this.polygons = [];
  89. var bounds = result.districtList[0].boundaries;
  90. if (bounds) {
  91. for (var i = 0, l = bounds.length; i < l; i++) {
  92. //生成行政区划polygon
  93. var polygon = new AMap.Polygon({
  94. strokeWeight: 1, //边界宽度
  95. path: bounds[i],
  96. fillOpacity: 0.3, // 透明度
  97. fillColor: '#2887f2',
  98. strokeColor: '#2887f2' //边界颜色
  99. });
  100. this.polygons.push(polygon);
  101. }
  102. }
  103. this.map.add(this.polygons);
  104. this.map.setFitView(this.polygons); //视口自适应
  105. });
  106. },
  107. getAddress(points) {
  108. //获取准确地址
  109. let geocoder = new AMap.Geocoder({ radius: 1000 });
  110. geocoder.getAddress(points, (status, result) => {
  111. if (status === 'complete' && result.regeocode) {
  112. this.districtMask(result.regeocode.addressComponent.district);
  113. } else {
  114. this.map.remove(this.polygons);
  115. }
  116. });
  117. },
  118. getPoin() {
  119. this.$http.get('/sc-community/assets/community/list').then(({ data, status, msg }) => {
  120. if (status == 0) {
  121. this.poisArray = data;
  122. }
  123. });
  124. }
  125. },
  126. destroyed() {
  127. this.map && this.map.destroy();
  128. },
  129. created() {
  130. this.getPoin();
  131. new Promise((resolve) => {
  132. if (!!AMap) {
  133. resolve(true);
  134. }
  135. }).then(() => {
  136. this.init();
  137. });
  138. }
  139. };
  140. </script>
  141. <style scoped lang="scss">
  142. @import '@assets/css/public-style.scss';
  143. .mapMasp {
  144. position: absolute;
  145. z-index: 2000;
  146. background-color: rgba(0, 0, 0, 1);
  147. margin: 0;
  148. top: 0;
  149. right: 0;
  150. bottom: 0;
  151. left: 0;
  152. -webkit-transition: opacity 0.3s;
  153. transition: opacity 0.3s;
  154. }
  155. .mapItems {
  156. height: 100%;
  157. position: relative;
  158. .topSelect {
  159. position: absolute;
  160. top: rem(15);
  161. left: 0;
  162. padding: 0 rem(15);
  163. width: 100%;
  164. }
  165. }
  166. #mapInit {
  167. width: 100%;
  168. height: 100%;
  169. /deep/ .amap-marker-label {
  170. background: rgba(0, 0, 0, 0.5);
  171. text-align: center;
  172. min-width: rem(80);
  173. min-height: rem(20);
  174. line-height: rem(20);
  175. box-shadow: 0px 2px 10px 0px rgba(66, 70, 86, 0.08);
  176. }
  177. }
  178. </style>