index.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503
  1. <template>
  2. <view class="map-box">
  3. <search ref="searchRef" @handleSearch="handleSearch" v-if="showMap" />
  4. <tiandituMap ref="tiandituMapRefs" @handleSearch="$refs.searchRef.onSearchFocus()" @clickMap="handleClickMap"
  5. @moveMap="moveMapSearch" @onLoadTianDiTu="initMaps" @onSelect="selectPoint" :apiKey="apiKey"
  6. @handleMapSite="handleMapSite">
  7. </tiandituMap>
  8. <Touchbox ref="TouchboxRef" :maxHeight="0.8" v-if="showMap && siteListArr && siteListArr.length > 0"
  9. :zIndex="1001" @currentHeight="e => TouchHeight = e">
  10. <scroll-view :style="{'height':TouchHeight - 15 +'px' }" scroll-y="true" :show-scrollbar="false">
  11. <template v-for="item in siteListArr">
  12. <siteListModel :info="item" @checkSiteDetails="handleMapSite" />
  13. </template>
  14. </scroll-view>
  15. </Touchbox>
  16. <siteDetails ref="siteDetailsRef" />
  17. </view>
  18. </template>
  19. <script>
  20. import tools from '@/components/tiandituMap/tools.js'
  21. import search from "./model/search.vue"
  22. import siteListModel from "./model/siteList.vue";
  23. import { getMapCenterPoint_Api, getMapList_Api } from "@/api/map.js"
  24. import siteDetails from "./model/siteDetails.vue"
  25. import $config from "@/config/index.js"
  26. import { EventBus } from "@/utils/vueBus.js"
  27. import { getLocation } from "@/utils/tool.js"
  28. export default {
  29. name: 'tdtmap',
  30. components: {
  31. search,
  32. siteListModel,
  33. siteDetails
  34. },
  35. data() {
  36. return {
  37. searchDot: false,
  38. showMap: false,
  39. longitude: undefined,
  40. latitude: undefined,
  41. apiKey: $config.tianKey,
  42. winWidth: 0,
  43. winHeight: 0,
  44. winTop: 0,
  45. datalist: [],
  46. startY: 0,
  47. selectItem: {},
  48. iStatusBarHeight: 0,
  49. siteListArr: [],
  50. TouchHeight: 0,
  51. }
  52. },
  53. created() {
  54. getLocation();
  55. this.getMapCenterPoint()
  56. },
  57. mounted() {
  58. this.disableScroll()
  59. },
  60. beforeDestroy() {
  61. try {
  62. document.removeEventListener('touchmove');
  63. document.body.removeEventListener('mousewheel');
  64. document.body.removeEventListener('DOMMouseScroll');
  65. document.removeEventListener('onmousewheel', function() {
  66. window.event.returnValue = false;
  67. });
  68. } catch (error) {
  69. //TODO handle the exception
  70. }
  71. },
  72. watch: {
  73. siteListArr: {
  74. handler(newArr) {
  75. try {
  76. this.$refs.tiandituMapRefs.clearIcon().then(res => {
  77. this.$nextTick(() => {
  78. (newArr || []).forEach((el, index) => {
  79. const { longitude, latitude, mapTypeIcon } = el
  80. this.$refs.tiandituMapRefs.setIcon(longitude, latitude, false,
  81. mapTypeIcon,
  82. el);
  83. if (index === 0 && this.searchDot) {
  84. this.$refs.tiandituMapRefs.Trenderjs.SelectedDot(el, true,
  85. 12)
  86. }
  87. })
  88. })
  89. });
  90. } catch (error) {}
  91. },
  92. deep: true
  93. }
  94. },
  95. methods: {
  96. disableScroll() {
  97. if (typeof window.addEventListener === 'function') {
  98. document.addEventListener('touchmove', function(e) {
  99. e.preventDefault();
  100. }, { passive: false });
  101. document.body.addEventListener('mousewheel', function(e) {
  102. e.preventDefault();
  103. });
  104. document.body.addEventListener('DOMMouseScroll', function(e) {
  105. e.preventDefault();
  106. });
  107. } else {
  108. document.attachEvent('onmousewheel', function() {
  109. window.event.returnValue = false;
  110. });
  111. }
  112. },
  113. // 点击地图
  114. handleClickMap() {
  115. if (this.$refs.TouchboxRef) {
  116. this.$refs.TouchboxRef.concealList()
  117. }
  118. },
  119. // 点击地图标注点位
  120. handleMapSite(parmas = {}) {
  121. // const { Lng, Lat } = parmas;
  122. const Lng = parmas.Lng || parmas.longitude;
  123. const Lat = parmas.Lat || parmas.latitude;
  124. // const item = (this.siteListArr || []).find(el => el.longitude == Lng && el.latitude == Lat);
  125. // this.checkSiteDetails(item)
  126. // 放大选中的图标
  127. let maxIcon = false;
  128. this.$refs.tiandituMapRefs.clearIcon().then(res => {
  129. (this.siteListArr || []).forEach(el => {
  130. const { longitude, latitude, mapTypeIcon } = el;
  131. if (el.longitude == Lng && el.latitude == Lat) {
  132. maxIcon = true
  133. this.checkSiteDetails(el)
  134. } else {
  135. maxIcon = false
  136. }
  137. this.$refs.tiandituMapRefs.setIcon(longitude, latitude, false,
  138. mapTypeIcon,
  139. el, maxIcon);
  140. })
  141. });
  142. },
  143. // 查看点位详情
  144. checkSiteDetails(info) {
  145. console.log('111' , info)
  146. if (info) {
  147. this.$refs.tiandituMapRefs.Trenderjs.SelectedDot(info, true)
  148. // EventBus.$emit('TianDiTuSite', info)
  149. this.handleClickMap();
  150. this.$refs.siteDetailsRef.openDetails(info)
  151. }
  152. },
  153. // 获取地图中心点
  154. getMapCenterPoint() {
  155. uni.showLoading()
  156. this.showMap = false;
  157. getMapCenterPoint_Api().then(res => {
  158. const { longitude, latitude, mapTypeIcon } = res || {};
  159. this.longitude = longitude;
  160. this.latitude = latitude;
  161. this.open(longitude, latitude, mapTypeIcon);
  162. }).catch(err => { this.open(null, null) }).finally(() => {
  163. uni.hideLoading()
  164. })
  165. },
  166. moveMapSearch(parms) {
  167. const { Lng, Lat } = parms;
  168. this.longitude = Lng;
  169. this.latitude = Lat;
  170. this.$refs.searchRef.onSearchFocus()
  171. // console.log("moveMapSearch", Lng, Lat)
  172. },
  173. handleSearch(val = {}) {
  174. const parms = {
  175. ...val,
  176. longitude: this.longitude,
  177. latitude: this.latitude,
  178. radius: 5000
  179. };
  180. // 判断是否通过收索
  181. this.searchDot = parms.search
  182. // 如果存在收索条件,则去掉 范围 和 中心点
  183. if (parms.locationName || parms.mapTypeId || parms.areaCode) {
  184. delete parms.radius
  185. delete parms.latitude
  186. delete parms.longitude
  187. }
  188. delete parms.search;
  189. getMapList_Api(parms).then(res => {
  190. if (!res || res.length === 0) {
  191. uni.showToast({
  192. title: "当前区域无办理点位",
  193. icon: 'none'
  194. })
  195. }
  196. this.siteListArr = res || [];
  197. }).catch(err => {
  198. this.siteListArr = [];
  199. }).finally(() => {
  200. clearTimeout(this.SearchTimeout)
  201. this.SearchTimeout = null;
  202. })
  203. },
  204. // //普通搜索
  205. // handleSearch(val = {}) {
  206. // const parms = {
  207. // ...val,
  208. // longitude: this.longitude,
  209. // latitude: this.latitude,
  210. // radius: 5000
  211. // };
  212. // getMapList_Api(parms).then(res => {
  213. // if (!res || res.length === 0) {
  214. // uni.showToast({
  215. // title: "当前区域无办理点位",
  216. // icon: 'none'
  217. // })
  218. // }
  219. // this.siteListArr = res || [];
  220. // }).catch(err => {
  221. // this.siteListArr = [];
  222. // })
  223. // },
  224. open(lon, lat, mapTypeIcon) {
  225. if (lon && lat) {
  226. this.$nextTick(() => {
  227. this.$refs.tiandituMapRefs.initCharts(lon, lat, mapTypeIcon)
  228. this.showMap = true;
  229. })
  230. } else {
  231. uni.showModal({
  232. title: '提示',
  233. content: '地图中心点获取错误,请联系管理员!',
  234. success: res => {
  235. // console.log("showModal == ", res)
  236. if (res.confirm) {}
  237. }
  238. })
  239. }
  240. },
  241. close() {
  242. this.visible = false
  243. },
  244. onConfirm() {
  245. if (Object.keys(this.selectItem).length) {
  246. this.visible = false
  247. this.$emit('onSelect', this.selectItem)
  248. } else {
  249. tools.createMessage('请选择位置')
  250. }
  251. },
  252. upDateLonLat(lon, lat) {
  253. if (lon && lat) {
  254. this.$refs.tiandituMapRefs.upDataCharts(lon, lat)
  255. } else {
  256. console.error('请传入lon, lat')
  257. }
  258. },
  259. tianidtuSearch(value) {
  260. if (value.city) {
  261. this.cityInfoSearch(value)
  262. } else {
  263. this.infoSearch(value)
  264. }
  265. },
  266. async infoSearch(value) { // 地理编码查询
  267. let params = {
  268. ds: {
  269. "keyWord": value.keyword,
  270. },
  271. tk: this.apiKey,
  272. }
  273. let resData = await tools.createRequest('https://api.tianditu.gov.cn/geocoder', params, true)
  274. if (resData.status === '0') {
  275. const location = resData.location
  276. const formateOne = tools.formatterAdressLocation(resData, 3)
  277. this.datalist = [formateOne]
  278. this.selectItem = datalist
  279. this.$refs.tiandituMapRefs.upDataCharts(location.lon, location.lat)
  280. }
  281. },
  282. async cityInfoSearch(value) { // 地名搜索2.0
  283. let params = {
  284. postStr: {
  285. "keyWord": value.keyword,
  286. "queryType": 12,
  287. "start": 0,
  288. "count": 10,
  289. "specify": value.city.value
  290. },
  291. type: 'query',
  292. tk: this.apiKey,
  293. }
  294. let resData = await tools.createRequest('https://api.tianditu.gov.cn/v2/search', params, true)
  295. if (resData.status.infocode === 1000) {
  296. const {
  297. pois: aPoints,
  298. count
  299. } = resData
  300. if (count === '0' || !aPoints || !aPoints.length) {
  301. return tools.createMessage('没有找到该地址')
  302. }
  303. const {
  304. pois,
  305. keyWord,
  306. lonlat
  307. } = aPoints[0]
  308. const formateData = aPoints.map((item) => tools.formatterAdressLocation(item, 2))
  309. this.datalist = formateData
  310. this.selectItem = formateData[0]
  311. const [lon, lat] = lonlat.split(',')
  312. this.$refs.tiandituMapRefs.upDataCharts(lon, lat)
  313. } else {
  314. tools.createMessage('数据异常', 1000, false, 'error')
  315. }
  316. },
  317. selectListItem(item) {
  318. this.$refs.tiandituMapRefs.upDataCharts(item.location.lon, item.location.lat)
  319. },
  320. selectPoint(e) {
  321. this.domMinHeight = '0vh'
  322. this.datalist = [e]
  323. this.selectItem = e
  324. },
  325. initMaps() {
  326. console.warn('--------天地图加载完成--------');
  327. this.$emit('onLoad')
  328. },
  329. // start(e) {
  330. // const clientY = e.changedTouches[0].clientY
  331. // this.startY = clientY
  332. // },
  333. // end(e) {
  334. // const transformY = e.changedTouches[0].clientY - this.startY;
  335. // switch (true) {
  336. // case transformY > 50:
  337. // console.log('下划')
  338. // this.domMaxHeight = '20vh'
  339. // this.domMinHeight = '0vh'
  340. // break;
  341. // case transformY < -50:
  342. // console.log('上划')
  343. // this.domMaxHeight = '50vh'
  344. // this.domMinHeight = '50vh'
  345. // break;
  346. // default:
  347. // break;
  348. // }
  349. // },
  350. selectCard(item) {
  351. this.domMaxHeight = '20vh'
  352. this.domMinHeight = '0vh'
  353. this.selectItem = item
  354. this.selectListItem(item)
  355. },
  356. setTouchHeight(val) {
  357. // console.log('setScrollHeight = ', val)
  358. // 实时返回的滑动组件高度
  359. this.TouchHeight = val;
  360. },
  361. setScrollMaxHeight(val) {
  362. //最大高度
  363. this.scrollMaxHeight = val;
  364. },
  365. }
  366. }
  367. </script>
  368. <style scope>
  369. .map-box {
  370. width: 100vw;
  371. height: 100vh;
  372. /* position: fixed;
  373. left: 0;
  374. top:0;
  375. right: 0;
  376. bottom: 0; */
  377. }
  378. .mask {
  379. /* overflow: hidden; */
  380. position: fixed;
  381. left: 0;
  382. background-color: #FFFFFF;
  383. z-index: 399;
  384. }
  385. /* footer */
  386. .list-boxd {
  387. position: absolute;
  388. bottom: 0;
  389. left: 0;
  390. z-index: 401;
  391. right: 0;
  392. border-radius: 14px 14px 0 0;
  393. background: #FFFFFF;
  394. transition: all 1s;
  395. }
  396. .list-header {
  397. height: 20px;
  398. position: relative;
  399. border-bottom: 1px solid #f3f4f6;
  400. cursor: pointer;
  401. }
  402. .list-header::after {
  403. position: absolute;
  404. left: 50%;
  405. top: 50%;
  406. transform: translate(-50%, -50%);
  407. content: '';
  408. height: 6px;
  409. width: 60px;
  410. border-top: 1px solid #e8e8e8;
  411. border-bottom: 1px solid #e8e8e8;
  412. }
  413. .list-content {
  414. max-height: 50vh;
  415. overflow-y: scroll;
  416. }
  417. .card {
  418. min-height: 44px;
  419. padding: 12px;
  420. position: relative;
  421. display: flex;
  422. justify-content: space-between;
  423. align-items: center;
  424. }
  425. .card-left {
  426. display: flex;
  427. flex-direction: column;
  428. justify-content: center;
  429. }
  430. .card-right {
  431. padding-right: 10px;
  432. }
  433. .arrow {
  434. border-top: 2px solid #666666;
  435. border-right: 2px solid #666666;
  436. width: 10px;
  437. height: 10px;
  438. transform: rotate(45deg);
  439. }
  440. .card:active {
  441. background-color: #f3f4f6;
  442. }
  443. .card::after {
  444. position: absolute;
  445. content: '';
  446. bottom: 0;
  447. height: 1px;
  448. background-color: #e8e8e8;
  449. width: 90%;
  450. }
  451. .card:last-child::after {
  452. height: 0;
  453. background-color: #FFFFFF;
  454. }
  455. .card-title {
  456. font-size: 18px;
  457. }
  458. .card-text {
  459. color: #e8e8e8;
  460. font-size: 13px;
  461. }
  462. </style>