|
|
@@ -8,9 +8,9 @@
|
|
|
<image class="position-icon" src="@/static/images/hint.png" mode="aspectFit"></image>
|
|
|
<text class="position-text">提示</text>
|
|
|
</view>
|
|
|
- <view v-if="isFeedback" class="position" @click.stop="$emit('openFeedback')">
|
|
|
- <image class="position-icon" src="@/static/images/feedback.png" mode="aspectFit"></image>
|
|
|
- <text class="position-text">反馈</text>
|
|
|
+ <view v-if="isFeedback" class="feedback-icon" @click.stop="$emit('openFeedback')">
|
|
|
+ <image class="position-icon" src="@/static/images/feedback01.png" mode="aspectFit"></image>
|
|
|
+ <!-- <text class="position-text">反馈</text> -->
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -19,8 +19,10 @@
|
|
|
<script>
|
|
|
import tools from './tools.js'
|
|
|
import iconPath from '@/static/images/point.png'
|
|
|
- import { EventBus } from "@/utils/vueBus.js"
|
|
|
- import c from "@/config/index.js"
|
|
|
+ import {
|
|
|
+ EventBus
|
|
|
+ } from "@/utils/vueBus.js"
|
|
|
+ import c from "@/config/index.js"
|
|
|
export default {
|
|
|
name: "tianditu",
|
|
|
props: {
|
|
|
@@ -32,8 +34,8 @@
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- isGetLocation:c.isGetLocation,
|
|
|
- isFeedback:c.isFeedback,
|
|
|
+ isGetLocation: c.isGetLocation,
|
|
|
+ isFeedback: c.isFeedback,
|
|
|
checkedDot: false,
|
|
|
Tmap: null,
|
|
|
option: {
|
|
|
@@ -116,13 +118,19 @@
|
|
|
}
|
|
|
</script>
|
|
|
<script module="Trenderjs" lang="renderjs">
|
|
|
- import { EventBus } from "@/utils/vueBus.js"
|
|
|
+ import {
|
|
|
+ EventBus
|
|
|
+ } from "@/utils/vueBus.js"
|
|
|
import iconPath from '@/static/images/point.png'
|
|
|
import dotPath from '@/static/images/dot.png'
|
|
|
import locationPath from '@/static/images/location.png'
|
|
|
import $confog from "@/config/index.js"
|
|
|
- import { mapGetters } from "vuex"
|
|
|
- const { type } = $confog
|
|
|
+ import {
|
|
|
+ mapGetters
|
|
|
+ } from "vuex"
|
|
|
+ const {
|
|
|
+ type
|
|
|
+ } = $confog
|
|
|
var Tmap = null;
|
|
|
const left = -(uni.upx2px(150));
|
|
|
export default {
|
|
|
@@ -199,7 +207,10 @@
|
|
|
const dotArr = []
|
|
|
if (Tmap) await this.getMapCenter();
|
|
|
|
|
|
- const { Lng, Lat } = this.centreDot || {};
|
|
|
+ const {
|
|
|
+ Lng,
|
|
|
+ Lat
|
|
|
+ } = this.centreDot || {};
|
|
|
|
|
|
let maxIcon = false;
|
|
|
(newArr || []).forEach((el, index) => {
|
|
|
@@ -208,7 +219,11 @@
|
|
|
if (index === 0 && this.searchDot) {
|
|
|
this.SelectedDot(el, true, 12)
|
|
|
}
|
|
|
- const { longitude, latitude, mapTypeIcon } = el;
|
|
|
+ const {
|
|
|
+ longitude,
|
|
|
+ latitude,
|
|
|
+ mapTypeIcon
|
|
|
+ } = el;
|
|
|
if (Lng == longitude && Lat == latitude) {
|
|
|
el.maxIcon = true;
|
|
|
maxIcon = true;
|
|
|
@@ -277,7 +292,9 @@
|
|
|
geocode.getLocation(v, (result) => {
|
|
|
if (result.getStatus() == 0) {
|
|
|
let t = '';
|
|
|
- const { poi } = result.getAddressComponent()
|
|
|
+ const {
|
|
|
+ poi
|
|
|
+ } = result.getAddressComponent()
|
|
|
try {
|
|
|
if (poi && poi.indexOf('湖北省武汉市') === 0) {
|
|
|
const lo = poi.split('湖北省武汉市')
|
|
|
@@ -310,9 +327,15 @@
|
|
|
// this.setMyIcon()
|
|
|
|
|
|
EventBus.$emit('TianDiTuSearch', (res) => {
|
|
|
- const { longitude, latitude } = res || {};
|
|
|
+ const {
|
|
|
+ longitude,
|
|
|
+ latitude
|
|
|
+ } = res || {};
|
|
|
if (longitude && latitude) {
|
|
|
- this.SelectedDot({ longitude, latitude })
|
|
|
+ this.SelectedDot({
|
|
|
+ longitude,
|
|
|
+ latitude
|
|
|
+ })
|
|
|
}
|
|
|
|
|
|
// // this.SelectedDot({ longitude, latitude })
|
|
|
@@ -368,7 +391,7 @@
|
|
|
// })
|
|
|
// }
|
|
|
// }
|
|
|
- console.log('this.checkedDot === ' , this.checkedDot)
|
|
|
+ console.log('this.checkedDot === ', this.checkedDot)
|
|
|
// 地图移动,判断是否缩放/移动地图,还是通过点位定位
|
|
|
if (!this.checkedDot) {
|
|
|
const v = e.target.getCenter()
|
|
|
@@ -376,7 +399,10 @@
|
|
|
if (v) {
|
|
|
const Lng = v.getLng();
|
|
|
const Lat = v.getLat();
|
|
|
- this.$emit("moveMap", { Lng, Lat })
|
|
|
+ this.$emit("moveMap", {
|
|
|
+ Lng,
|
|
|
+ Lat
|
|
|
+ })
|
|
|
}
|
|
|
} else {
|
|
|
// 点位移动,做处理
|
|
|
@@ -392,10 +418,18 @@
|
|
|
},
|
|
|
|
|
|
// 点击地图标注的点位
|
|
|
- clickMapSite({ type, target, lnglat, containerPoint }) {
|
|
|
+ clickMapSite({
|
|
|
+ type,
|
|
|
+ target,
|
|
|
+ lnglat,
|
|
|
+ containerPoint
|
|
|
+ }) {
|
|
|
const Lng = lnglat.getLng();
|
|
|
const Lat = lnglat.getLat();
|
|
|
- this.$emit('handleMapSite', { Lng, Lat })
|
|
|
+ this.$emit('handleMapSite', {
|
|
|
+ Lng,
|
|
|
+ Lat
|
|
|
+ })
|
|
|
|
|
|
},
|
|
|
// 天地图缩放事件
|
|
|
@@ -502,7 +536,7 @@
|
|
|
// console.log('addEventListener = ' , e)
|
|
|
// });
|
|
|
this.addMapEvent()
|
|
|
-
|
|
|
+
|
|
|
this.$ownerInstance.callMethod('compliteonLoadTianDiTu')
|
|
|
// this.$emit("handleSearch")
|
|
|
},
|
|
|
@@ -513,7 +547,13 @@
|
|
|
// },
|
|
|
// setIcon(lng, lat, isClear, iconU, info, max = false) {
|
|
|
setIcon(row) {
|
|
|
- const { longitude, latitude, mapTypeIcon, locationName, maxIcon } = row
|
|
|
+ const {
|
|
|
+ longitude,
|
|
|
+ latitude,
|
|
|
+ mapTypeIcon,
|
|
|
+ locationName,
|
|
|
+ maxIcon
|
|
|
+ } = row
|
|
|
|
|
|
// const w = uni.upx2px(54)
|
|
|
// const h = uni.upx2px(54)
|
|
|
@@ -594,7 +634,10 @@
|
|
|
},
|
|
|
SelectedDot(res, dot = false, level = 16) {
|
|
|
this.checkedDot = dot
|
|
|
- const { longitude, latitude } = res;
|
|
|
+ const {
|
|
|
+ longitude,
|
|
|
+ latitude
|
|
|
+ } = res;
|
|
|
Tmap.panTo(new T.LngLat(longitude, latitude), level); // 移动到选中的点位
|
|
|
setTimeout(function() {
|
|
|
this.checkedDot = false
|
|
|
@@ -604,7 +647,10 @@
|
|
|
|
|
|
},
|
|
|
setMyIcon() {
|
|
|
- const { longitude, latitude } = this.useLocation || {}
|
|
|
+ const {
|
|
|
+ longitude,
|
|
|
+ latitude
|
|
|
+ } = this.useLocation || {}
|
|
|
if (!Tmap || !longitude || !latitude) return;
|
|
|
// const w = uni.upx2px(54)
|
|
|
// const h = uni.upx2px(54)
|
|
|
@@ -643,7 +689,10 @@
|
|
|
// siteListArr
|
|
|
if (this.centreDot) {
|
|
|
try {
|
|
|
- const { Lng, Lat } = this.centreDot || {};
|
|
|
+ const {
|
|
|
+ Lng,
|
|
|
+ Lat
|
|
|
+ } = this.centreDot || {};
|
|
|
// const w = uni.upx2px(54)
|
|
|
// const h = uni.upx2px(92)
|
|
|
const icon = new T.Icon({
|
|
|
@@ -675,13 +724,15 @@
|
|
|
|
|
|
.tool-btn {
|
|
|
position: fixed;
|
|
|
- right: 30rpx;
|
|
|
+ right: 20rpx;
|
|
|
bottom: 45vh;
|
|
|
z-index: 1000;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
}
|
|
|
|
|
|
.position {
|
|
|
-
|
|
|
width: 94rpx;
|
|
|
// height: 99rpx;
|
|
|
background-color: #fff;
|
|
|
@@ -698,7 +749,8 @@
|
|
|
}
|
|
|
|
|
|
}
|
|
|
- .position-text{
|
|
|
+
|
|
|
+ .position-text {
|
|
|
display: inline-block;
|
|
|
width: 100%;
|
|
|
text-align: center;
|
|
|
@@ -706,8 +758,21 @@
|
|
|
color: #3291F8;
|
|
|
line-height: 1.2;
|
|
|
}
|
|
|
- &+.position{
|
|
|
+
|
|
|
+ &+.position {
|
|
|
margin-top: 20rpx;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ .feedback-icon {
|
|
|
+ margin-top: 20rpx;
|
|
|
+ width: 126rpx;
|
|
|
+ height: 122rpx;
|
|
|
+ background-color: transparent;
|
|
|
+
|
|
|
+ .position-icon {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|