修改地图组件
This commit is contained in:
A1300399510
parent
0fd2a83043
commit
d999e79f10
@ -3,14 +3,13 @@
|
||||
|
||||
<div class="" :class="{ 'pop': show }">
|
||||
<div class="close flexcenter" @click="showPop">
|
||||
<!-- <img class="icon" src="@/assets/img/publicImage/circle-close.png"> -->
|
||||
<img class="icon" src="@/assets/img/publicImage/white-cross.svg">
|
||||
</div>
|
||||
<div id="container">
|
||||
<div class="location-bj flexcenter" @click="showPop" v-if="!show">
|
||||
<div class="location-site flexacenter">
|
||||
<img class="tracingPoint" src="@/assets/img/publicImage/u1704.png" />
|
||||
<div class="location-name">{{ props.info['address'] }}</div>
|
||||
<div class="location-name">{{ props['name'] }}</div>
|
||||
<img class="location-arrows" src="@/assets/img/publicImage/u353.svg" />
|
||||
</div>
|
||||
</div>
|
||||
@ -23,19 +22,14 @@
|
||||
import { ref, defineProps } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
info: Object,
|
||||
latlng: Object,
|
||||
name: String,
|
||||
})
|
||||
|
||||
// coordinate
|
||||
|
||||
let coordinate = props.info['coordinate']
|
||||
console.log("coordinate", coordinate);
|
||||
|
||||
let key = ref("MVNBZ-PEFWI-O4OGT-5ADVJ-7QAYJ-NBFY4")
|
||||
|
||||
const initMap = () => {
|
||||
|
||||
let center = new TMap.LatLng(coordinate[0], coordinate[1]);
|
||||
let center = new TMap.LatLng(props.latlng['longitude'], props.latlng['latitude']);
|
||||
let map = new TMap.Map("container", {
|
||||
zoom: 15,
|
||||
disableDefaultUI: true, //禁止所有控件
|
||||
@ -46,12 +40,11 @@ const initMap = () => {
|
||||
map.removeControl(TMap.constants.DEFAULT_CONTROL_ID.ZOOM);
|
||||
map.removeControl(TMap.constants.DEFAULT_CONTROL_ID.ROTATION);
|
||||
|
||||
|
||||
let marker = new TMap.MultiMarker({
|
||||
id: "marker-layer",
|
||||
map: map,
|
||||
geometries: [{
|
||||
"position": new TMap.LatLng(coordinate[0], coordinate[1]),
|
||||
"position": new TMap.LatLng(props.latlng['longitude'], props.latlng['latitude']),
|
||||
}]
|
||||
});
|
||||
}
|
||||
@ -68,10 +61,7 @@ loadScript(`https://map.qq.com/api/gljs?v=1.exp&key=${key.value}&callback=initMa
|
||||
|
||||
let show = ref(false) // 弹窗状态
|
||||
|
||||
const showPop = () => {
|
||||
show.value = !show.value
|
||||
console.log("showPop", showPop);
|
||||
}
|
||||
const showPop = () => show.value = !show.value
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
@ -82,8 +82,7 @@
|
||||
<div class="details-box flexflex">
|
||||
<div class="details-left flex1">
|
||||
<!-- 房间类型 -->
|
||||
<!-- <div class="type-box" v-if="roomList.length != 0" ref="roomEle"> -->
|
||||
<div class="type-box" v-if="false" ref="roomEle">
|
||||
<div class="type-box" v-if="roomList.length != 0" ref="roomEle">
|
||||
<div class="type-item flexacenter" v-for="item in roomList">
|
||||
<img class="type-icon" v-if="item['status'] == 1"
|
||||
src="@/assets/img/apartmentDetail/apartment-have.svg" />
|
||||
@ -95,15 +94,17 @@
|
||||
<div class="tags-item flexcenter" v-for="it in item.tags">{{ it }}</div>
|
||||
</div>
|
||||
<div class="media-box flexflex">
|
||||
<div class="media-btn flexcenter">
|
||||
<div class="media-btn left flexcenter">
|
||||
<img class="arrow" src="@/assets/img/publicImage/black-arrow.svg" alt="">
|
||||
</div>
|
||||
<div class="media-item flexcenter" v-for="it in item['videos']">
|
||||
<img class="media-img" :src="it['thumbnail']">
|
||||
<img class="media-icon" src="@/assets/img/apartmentDetail/media-icon.svg" />
|
||||
</div>
|
||||
<div class="media-item flexcenter" v-for="it in item['images']">
|
||||
<img class="media-img" :src="it['thumbnail']">
|
||||
<div class="media-list flexacenter">
|
||||
<div class="media-item flexcenter" v-for="it in item['videos']">
|
||||
<img class="media-img" :src="it['thumbnail']">
|
||||
<img class="media-icon" src="@/assets/img/apartmentDetail/media-icon.svg" />
|
||||
</div>
|
||||
<div class="media-item flexcenter" v-for="it in item['images']">
|
||||
<img class="media-img" :src="it['thumbnail']">
|
||||
</div>
|
||||
</div>
|
||||
<div class="media-btn flexcenter">
|
||||
<img class="arrow" src="@/assets/img/publicImage/black-arrow.svg" alt="">
|
||||
@ -141,7 +142,8 @@
|
||||
<img class="icon" src="@/assets/img/apartmentDetail/location-icon.png">
|
||||
{{ info.location || '位置' }}
|
||||
</div>
|
||||
<view-map :info="info"></view-map>
|
||||
<view-map :latlng="{ longitude: info['coordinate'][0], latitude: info['coordinate'][1] }"
|
||||
:name="info['address']"></view-map>
|
||||
|
||||
|
||||
<!-- 交通 -->
|
||||
@ -362,7 +364,6 @@ proxy.$get("/tenement/pc/api/apartment/details", { uniqid }).then(res => {
|
||||
data['info']['coordinate'] = data['info']['coordinate'].split(',').map(item => {
|
||||
return +item
|
||||
})
|
||||
console.log(data['info']['coordinate']);
|
||||
info.value = data['info']
|
||||
attachment.value = data['info']['attachment']
|
||||
withsameapartments.value = data['withsameapartments']
|
||||
@ -565,7 +566,6 @@ const contactReservationService = () => {
|
||||
}
|
||||
|
||||
.el-carousel__item {
|
||||
background-color: #50e3c2;
|
||||
width: 511px;
|
||||
height: 340px;
|
||||
display: flex;
|
||||
@ -744,7 +744,7 @@ const contactReservationService = () => {
|
||||
justify-content: space-between;
|
||||
position: sticky;
|
||||
top: 20px;
|
||||
z-index: 110;
|
||||
z-index: 1002;
|
||||
|
||||
.nav-box {
|
||||
.nav-item {
|
||||
@ -861,7 +861,11 @@ const contactReservationService = () => {
|
||||
|
||||
.media-box {
|
||||
max-width: 460px;
|
||||
overflow: auto;
|
||||
// overflow: auto;
|
||||
|
||||
.media-list {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.media-item {
|
||||
position: relative;
|
||||
@ -888,6 +892,11 @@ const contactReservationService = () => {
|
||||
.media-btn {
|
||||
height: 80px;
|
||||
width: 30px;
|
||||
cursor: pointer;
|
||||
|
||||
&.left {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.arrow {
|
||||
width: 10px;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user