index.vue 14 KB

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