Aug
10 months ago
13 changed files with 393 additions and 157 deletions
Unified View
Diff Options
-
+1 -0admin-hanhai-vue/package.json
-
+3 -0admin-hanhai-vue/src/main.js
-
+20 -41admin-hanhai-vue/src/views/travelSpot/TravelSpotList.vue
-
+235 -0admin-hanhai-vue/src/views/travelSpot/modules/TencentMapPicker.vue
-
+33 -8admin-hanhai-vue/src/views/travelSpot/modules/TravelSpotForm.vue
-
+1 -1jeecg-boot-base/jeecg-boot-base-core/src/main/java/org/jeecg/modules/travelSpot/controller/TravelSpotController.java
-
+30 -13jeecg-boot-base/jeecg-boot-base-core/src/main/java/org/jeecg/modules/travelSpot/entity/TravelSpot.java
-
+1 -1jeecg-boot-base/jeecg-boot-base-core/src/main/java/org/jeecg/modules/travelSpot/mapper/TravelSpotMapper.java
-
+1 -1jeecg-boot-base/jeecg-boot-base-core/src/main/java/org/jeecg/modules/travelSpot/service/ITravelSpotService.java
-
+1 -1jeecg-boot-base/jeecg-boot-base-core/src/main/java/org/jeecg/modules/travelSpot/service/impl/TravelSpotServiceImpl.java
-
+18 -39jeecg-boot-base/jeecg-boot-base-core/src/main/java/org/jeecg/modules/travelSpot/vue/TravelSpotList.vue
-
+15 -10jeecg-boot-base/jeecg-boot-base-core/src/main/java/org/jeecg/modules/travelSpot/vue/modules/TravelSpotForm.vue
-
+34 -42jeecg-boot-base/jeecg-boot-base-core/src/main/java/org/jeecg/modules/travelSpot/vue3/TravelSpot.data.ts
+ 1
- 0
admin-hanhai-vue/package.json
View File
+ 3
- 0
admin-hanhai-vue/src/main.js
View File
+ 20
- 41
admin-hanhai-vue/src/views/travelSpot/TravelSpotList.vue
View File
+ 235
- 0
admin-hanhai-vue/src/views/travelSpot/modules/TencentMapPicker.vue
View File
| @ -0,0 +1,235 @@ | |||||
| <template> | |||||
| <div> | |||||
| <div class="map-box"> | |||||
| <div class="map" ref="map" style="height: 400px" ></div> | |||||
| <div class="map-search"> | |||||
| <div> | |||||
| <a-input-search id="place" v-model="searchValue" placeholder="请输入详细地址" enter-button @search="searchAddress(searchValue)" /> | |||||
| </div> | |||||
| <div> | |||||
| <ul v-if="kwData.length"> | |||||
| <li v-for="(item, index) in kwData" :key="index" @click="selectKeyword(item)">{{ item.address }}</li> | |||||
| </ul> | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| </template> | |||||
| <script> | |||||
| export default { | |||||
| name: 'TencentMapPicker', | |||||
| props: { | |||||
| latitude: { | |||||
| type: Number|String, | |||||
| default: 0 | |||||
| }, | |||||
| longitude: { | |||||
| type: Number|String, | |||||
| default: 0 | |||||
| } | |||||
| }, | |||||
| watch: { | |||||
| latitude(newVal, oldVal) { | |||||
| console.info(`newVal`,newVal,`oldVal`,oldVal) | |||||
| if (newVal) { | |||||
| this.form.latitude = newVal | |||||
| // this.$nextTick(()=>{ | |||||
| // this.map.setCenter(new window.TMap.LatLng(this.form.latitude, this.form.longitude)); | |||||
| // }) | |||||
| } | |||||
| }, | |||||
| longitude(newVal, oldVal) { | |||||
| console.info(`newVal`,newVal,`oldVal`,oldVal) | |||||
| if (newVal) { | |||||
| this.form.longitude = newVal | |||||
| // this.$nextTick(()=>{ | |||||
| // this.map.setCenter(new window.TMap.LatLng(this.form.latitude, this.form.longitude)); | |||||
| // }) | |||||
| } | |||||
| } | |||||
| }, | |||||
| data() { | |||||
| return { | |||||
| searchValue: '', //地图搜索 | |||||
| form: { | |||||
| longitude: 116.397128, | |||||
| latitude: 39.916527 | |||||
| }, | |||||
| kwData:[] | |||||
| } | |||||
| }, | |||||
| mounted() { | |||||
| let that = this | |||||
| if (that.script) return; | |||||
| that.script = document.createElement('script'); | |||||
| that.script.type = 'text/javascript'; | |||||
| that.script.src = `//map.qq.com/api/gljs?v=1.exp&libraries=service&key=SNGBZ-K6AKJ-5X2FI-XYKCM-DEZXZ-FGBA3`; | |||||
| document.head.appendChild(that.script); | |||||
| that.script.onload = () => { | |||||
| window.initMap = that.initMap; | |||||
| that.$nextTick(() => { | |||||
| that.initMap(); | |||||
| }); | |||||
| }; | |||||
| }, | |||||
| methods: { | |||||
| // 地图 | |||||
| initMap() { | |||||
| // 搜索类 | |||||
| this.searchEr = new window.TMap.service.Search({ pageSize: 15 }); | |||||
| // 地图主类 | |||||
| this.map = new window.TMap.Map(this.$refs.map, { | |||||
| backgroundColor: '#f7f7f7', | |||||
| mapStyleId: 'style1', | |||||
| zoom: 14, | |||||
| mapTypeControlOptions: { | |||||
| mapTypeIds: [], | |||||
| }, | |||||
| draggableCursor: 'crosshair', | |||||
| center: new window.TMap.LatLng(this.form.latitude, this.form.longitude), | |||||
| }); | |||||
| // 图层类 | |||||
| this.markerLayer = new window.TMap.MultiMarker({ | |||||
| map: this.map, | |||||
| geometries: [], | |||||
| }); | |||||
| // 地址逆解析 | |||||
| this.geocoder = new window.TMap.service.Geocoder(); | |||||
| const setMarker = () => { | |||||
| const latlng = new window.TMap.LatLng(this.form.latitude, this.form.longitude); | |||||
| this.markerLayer.setGeometries([]); | |||||
| let geometries = this.markerLayer.getGeometries(); | |||||
| geometries.push({ | |||||
| id: '-1', | |||||
| position: latlng, | |||||
| }); | |||||
| this.markerLayer.updateGeometries(geometries); | |||||
| }; | |||||
| this.map.on('click', (e) => { | |||||
| this.form.longitude = e.latLng.getLng(); // 经度 | |||||
| this.form.latitude = e.latLng.getLat(); // 纬度 | |||||
| setMarker(); | |||||
| this.getAddressFormat(); | |||||
| }); | |||||
| if (this.form.longitude) { | |||||
| this.map.setCenter(new window.TMap.LatLng(this.form.latitude, this.form.longitude)); | |||||
| setMarker(); | |||||
| } | |||||
| }, | |||||
| selectKeyword(event){ | |||||
| this.map.setCenter(new window.TMap.LatLng(event.location.lat, event.location.lng)); | |||||
| this.kwData = [] | |||||
| }, | |||||
| // 地图搜索 | |||||
| searchAddress(keyword = '') { | |||||
| if (!keyword) return; | |||||
| this.$jsonp('https://apis.map.qq.com/ws/place/v1/suggestion', { | |||||
| key: 'SNGBZ-K6AKJ-5X2FI-XYKCM-DEZXZ-FGBA3', | |||||
| output: 'jsonp', | |||||
| keyword: keyword, | |||||
| }).then((res) => { | |||||
| console.log(`res`,res) | |||||
| if (res.status === 0) { | |||||
| this.kwData = res.data | |||||
| } else { | |||||
| this.kwData = [] | |||||
| } | |||||
| }).catch((e) => { | |||||
| console.log(e) | |||||
| }) | |||||
| this.markerLayer.setGeometries([]); | |||||
| this.searchEr.searchRectangle({ | |||||
| keyword, | |||||
| bounds: this.map.getBounds(), | |||||
| }) | |||||
| .then((result) => { | |||||
| console.info(`result`,result) | |||||
| const { location = {} } = result.data[0] || {}; | |||||
| const { lat = 39.916527, lng = 116.397128 } = location; | |||||
| this.map.setCenter(new window.TMap.LatLng(lat, lng)); | |||||
| result.data.forEach((item, index) => { | |||||
| let geometries = this.markerLayer.getGeometries(); | |||||
| // 点标注数据数组 | |||||
| geometries.push({ | |||||
| id: String(index), | |||||
| position: item.location, | |||||
| }); | |||||
| // 绘制地点标注 | |||||
| this.markerLayer.updateGeometries(geometries); | |||||
| }); | |||||
| }); | |||||
| }, | |||||
| getAddressFormat() { | |||||
| const { longitude, latitude } = this.form; | |||||
| this.geocoder | |||||
| .getAddress({ | |||||
| location: new window.TMap.LatLng(latitude, longitude), | |||||
| }) | |||||
| .then((res) => { | |||||
| const { | |||||
| formatted_addresses: { recommend = '' }, | |||||
| } = res.result || {}; | |||||
| this.searchValue = recommend | |||||
| this.form.hotelDetailAddress = recommend; | |||||
| this.$emit('onLocationSelected', this.form); | |||||
| console.log(this.form); | |||||
| }); | |||||
| }, | |||||
| } | |||||
| } | |||||
| </script> | |||||
| <style> | |||||
| .map-box { | |||||
| position: relative; | |||||
| } | |||||
| .map-search { | |||||
| z-index: 1000; | |||||
| display: flex; | |||||
| flex-direction: column; | |||||
| position: absolute; | |||||
| top: 20px; | |||||
| left: 20px; | |||||
| width: 300px; | |||||
| } | |||||
| button { | |||||
| border-radius: 0; | |||||
| } | |||||
| .icons { | |||||
| display: flex; | |||||
| align-items: center; | |||||
| justify-content: space-between; | |||||
| } | |||||
| .time { | |||||
| margin-top: 15px; | |||||
| width: 100%; | |||||
| font-size: 12px; | |||||
| flex-wrap: wrap; | |||||
| height: 70%; | |||||
| } | |||||
| ul{ | |||||
| background: white; | |||||
| list-style-type: none; | |||||
| padding-left: 0px; | |||||
| height: 280px; | |||||
| overflow: scroll; | |||||
| } | |||||
| li{ | |||||
| padding-left: 6px; | |||||
| font-size: 10px; | |||||
| text-align: left; | |||||
| height: 40px; | |||||
| line-height: 15px; | |||||
| display: flex; | |||||
| align-items: center; | |||||
| } | |||||
| li:hover{ | |||||
| cursor: pointer; | |||||
| background: #f5f5f5; | |||||
| } | |||||
| </style> | |||||