index.vue 13 KB

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