新增点击地点标点,弹出地点信息弹窗功能

master
qubiaobiao 2024-03-07 17:27:54 +08:00
parent 72ccdcf0a6
commit 0c5cbe6789
4 changed files with 20 additions and 9 deletions

View File

@ -1,8 +1,8 @@
export const isLnglat = lnglat => { export const isLnglat = lnglat => {
const { lng, lat } = lnglat const { lng, lat } = lnglat
if (isNaN(lng) || lng > 180 || lng < -180) return false if (lng=='' || isNaN(lng) || lng > 180 || lng < -180) return false
if (isNaN(lat) || lat > 90 || lat < -90 ) return false if (lat=='' || isNaN(lat) || lat > 90 || lat < -90 ) return false
return true return true
} }

View File

@ -7,13 +7,17 @@
<br /> <br />
<h1 class="describesTitle">{{LandMarkShow.information.landTitle}}</h1> <h1 class="describesTitle">{{LandMarkShow.information.landTitle}}</h1>
<br /> <br />
<div class="paragraphBox">
<p class="describesParagraph">{{LandMarkShow.information.landDescribes}}</p> <p class="describesParagraph">{{LandMarkShow.information.landDescribes}}</p>
</div>
</div> </div>
</div> </div>
<div id="brieflyBox" class="brieflyBox" :style="brieflyShow"> <div id="brieflyBox" class="brieflyBox" :style="brieflyShow">
<div class="textBox"> <div class="textBox">
<h3 class="brieflyTitle">{{LandMarkShow.information.landTitle}}</h3> <h3 class="brieflyTitle">{{LandMarkShow.information.landTitle}}</h3>
<div class="paragraphBox">
<p class="brieflyParagraph">{{LandMarkShow.information.landBriefly}}</p> <p class="brieflyParagraph">{{LandMarkShow.information.landBriefly}}</p>
</div>
</div> </div>
</div> </div>
<div class="share showBtn"> <div class="share showBtn">
@ -165,10 +169,15 @@ const close = () => {
} }
.textBox { .textBox {
width: 80%; width: 80%;
height: 90%; height: 100%;
overflow: hidden; overflow: hidden;
margin: auto; margin: auto;
} }
.paragraphBox{
height:80%;
overflow-x:hidden;
overflow-y:auto;
}
.describesTitle { .describesTitle {
text-align: center; text-align: center;
margin: 0; margin: 0;
@ -178,25 +187,23 @@ const close = () => {
text-align: left; text-align: left;
text-indent: 2em; text-indent: 2em;
margin: 0; margin: 0;
font-weight:bolder;
font-size: clamp(0.5rem, 0.489rem + 1.05vw, 1rem); font-size: clamp(0.5rem, 0.489rem + 1.05vw, 1rem);
} }
.brieflyTitle { .brieflyTitle {
color: #fff; color: #fff;
text-align: left; text-align: left;
margin-top: 4%;
margin-bottom: 1%; margin-bottom: 1%;
font-size: clamp(0.6rem, 0.489rem + 1.05vw, 1.2rem); font-size: clamp(0.6rem, 0.489rem + 1.05vw, 1.2rem);
} }
.brieflyParagraph { .brieflyParagraph {
color: #fff; color: #fff;
font-size: clamp(0.4rem, 0.489rem + 1.05vw, 0.8rem);
text-align: left; text-align: left;
text-indent: 2em; text-indent: 2em;
margin-top: 0; margin-top: 0;
overflow: hidden; font-weight:bolder;
text-overflow: ellipsis; font-size: clamp(0.4rem, 0.489rem + 1.05vw, 0.8rem);
-webkit-line-clamp: 3;
display: -webkit-box;
-webkit-box-orient: vertical;
} }
.boxClose { .boxClose {
bottom: 15%; bottom: 15%;

View File

@ -7,6 +7,7 @@ export const useFlytoStore = defineStore({
state: () => ({ state: () => ({
lng: NaN, lng: NaN,
lat: NaN, lat: NaN,
change:true,
}), }),
getters: { getters: {
value: (state) => { state.lng, state.lat } value: (state) => { state.lng, state.lat }
@ -17,6 +18,7 @@ export const useFlytoStore = defineStore({
this.lng = flyto.lng this.lng = flyto.lng
this.lat = flyto.lat this.lat = flyto.lat
this.change = !this.change
return true return true
}, },

View File

@ -7,6 +7,7 @@ export const usePositionStore = defineStore({
state: () => ({ state: () => ({
lng: NaN, lng: NaN,
lat: NaN, lat: NaN,
change:true,
}), }),
getters: { getters: {
value: (state) => { state.lng, state.lat } value: (state) => { state.lng, state.lat }
@ -17,6 +18,7 @@ export const usePositionStore = defineStore({
this.lng = position.lng this.lng = position.lng
this.lat = position.lat this.lat = position.lat
this.change = !this.change
return true return true
}, },