封装地图组件
This commit is contained in:
A1300399510
parent
bbd1bfe6b2
commit
becfe41039
BIN
src/assets/img/publicImage/u1704.png
Normal file
BIN
src/assets/img/publicImage/u1704.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
6
src/assets/img/publicImage/u353.svg
Normal file
6
src/assets/img/publicImage/u353.svg
Normal file
@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="6px" height="12px" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="matrix(1 0 0 1 -4105 -1574 )">
|
||||
<path d="M 5.89690721649484 5.72344689378758 C 5.96563573883162 5.80360721442886 6 5.89579158316633 6 6 C 6 6.10420841683367 5.96563573883162 6.19639278557114 5.89690721649484 6.27655310621242 L 1.09278350515464 11.8797595190381 C 1.02405498281787 11.9599198396794 0.945017182130584 12 0.855670103092783 12 C 0.766323024054983 12 0.687285223367698 11.9599198396794 0.618556701030928 11.8797595190381 L 0.103092783505155 11.2785571142285 C 0.0343642611683849 11.1983967935872 0 11.1062124248497 0 11.002004008016 C 0 10.8977955911824 0.0343642611683849 10.8056112224449 0.103092783505155 10.7254509018036 L 4.15463917525773 6 L 0.103092783505155 1.27454909819639 C 0.0343642611683849 1.19438877755511 0 1.10220440881763 0 0.997995991983968 C 0 0.893787575150299 0.0343642611683849 0.801603206412824 0.103092783505155 0.721442885771542 L 0.618556701030928 0.120240480961924 C 0.687285223367698 0.0400801603206409 0.766323024054983 0 0.855670103092783 0 C 0.945017182130584 0 1.02405498281787 0.0400801603206409 1.09278350515464 0.120240480961924 L 5.89690721649484 5.72344689378758 Z " fill-rule="nonzero" fill="#ffffff" stroke="none" transform="matrix(1 0 0 1 4105 1574 )" />
|
||||
</g>
|
||||
</svg>
|
||||
178
src/components/public/viewMap.vue
Normal file
178
src/components/public/viewMap.vue
Normal file
@ -0,0 +1,178 @@
|
||||
<template>
|
||||
<div class="flexcenter" :class="{ 'pop-mask': show }">
|
||||
|
||||
<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>
|
||||
<img class="location-arrows" src="@/assets/img/publicImage/u353.svg" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, defineProps } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
info: Object,
|
||||
})
|
||||
|
||||
// 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 map = new TMap.Map("container", {
|
||||
zoom: 15,
|
||||
disableDefaultUI: true, //禁止所有控件
|
||||
zoomControl: false,
|
||||
center: center,
|
||||
});
|
||||
|
||||
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]),
|
||||
}]
|
||||
});
|
||||
}
|
||||
|
||||
const loadScript = (url, callback) => {
|
||||
let script = document.createElement('script');
|
||||
script.type = "text/javascript";
|
||||
script.src = url;
|
||||
script.onload = callback;
|
||||
document.body.appendChild(script);
|
||||
}
|
||||
|
||||
loadScript(`https://map.qq.com/api/gljs?v=1.exp&key=${key.value}&callback=initMap`, initMap)
|
||||
|
||||
let show = ref(false) // 弹窗状态
|
||||
|
||||
const showPop = () => {
|
||||
show.value = !show.value
|
||||
console.log("showPop", showPop);
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.pop-mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: rgba(0, 0, 0, 0.698039215686274);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.pop {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 1200px;
|
||||
height: 800px;
|
||||
background: #fff;
|
||||
border-radius: 20px;
|
||||
padding: 20px;
|
||||
|
||||
#container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.close {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: -25px;
|
||||
right: -25px;
|
||||
cursor: pointer;
|
||||
z-index: 1002;
|
||||
|
||||
.icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
#container {
|
||||
cursor: pointer;
|
||||
width: 816px;
|
||||
height: 180px;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 40px;
|
||||
border-radius: 10px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.location-site {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: rgba(51, 51, 51, 0.8);
|
||||
padding: 0 10px;
|
||||
line-height: 40px;
|
||||
font-size: 18px;
|
||||
border-radius: 10px;
|
||||
z-index: 22;
|
||||
}
|
||||
|
||||
.location-bj {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 1001;
|
||||
|
||||
background-color: rgba(51, 51, 51, 0.298039215686275);
|
||||
|
||||
}
|
||||
|
||||
.tracingPoint {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.location-name {
|
||||
color: #fff;
|
||||
font-weight: 400;
|
||||
min-width: 170px;
|
||||
max-width: 740px;
|
||||
font-size: 14px;
|
||||
color: #FFFFFF;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.location-arrows {
|
||||
width: 6px;
|
||||
height: 12px;
|
||||
}
|
||||
</style>
|
||||
@ -82,7 +82,8 @@
|
||||
<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="roomList.length != 0" ref="roomEle"> -->
|
||||
<div class="type-box" v-if="false" 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" />
|
||||
@ -140,6 +141,8 @@
|
||||
<img class="icon" src="@/assets/img/apartmentDetail/location-icon.png">
|
||||
{{ info.location || '位置' }}
|
||||
</div>
|
||||
<view-map :info="info"></view-map>
|
||||
|
||||
|
||||
<!-- 交通 -->
|
||||
<div class="traffic-box" v-if="info['traffic']">
|
||||
@ -208,10 +211,10 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="details-right flexacenter">
|
||||
<div class="QRcode-box apartment-QRcode flexflex" v-if="false">
|
||||
<div class="QRcode-box apartment-QRcode flexflex" v-if="true">
|
||||
<img class="mini-program-title" src="@/assets/img/apartmentDetail/mini-program-title.png">
|
||||
<div class="QRcode-case flexcenter">
|
||||
<img class="QRcode-img" src="" alt="">
|
||||
<img class="QRcode-img" :src="qrcode" alt="">
|
||||
</div>
|
||||
|
||||
<div class="apartment-QRcode-hint flexacenter">
|
||||
@ -219,16 +222,17 @@
|
||||
手机查看该公寓
|
||||
</div>
|
||||
</div>
|
||||
<div class="QRcode-box group-QRcode flexflex" v-if="false">
|
||||
<div class="QRcode-box group-QRcode flexflex" v-if="true">
|
||||
<img class="group-title" src="@/assets/img/apartmentDetail/group-title.png">
|
||||
<div class="QRcode-case flexcenter">
|
||||
<img class="QRcode-img" src="" alt="">
|
||||
<img class="QRcode-img" :src="wechat['wechatqrcode']" alt="">
|
||||
</div>
|
||||
|
||||
<div class="group-QRcode-hint flexacenter">
|
||||
<img class="scan-icon" src="@/assets/img/apartmentDetail/scan-icon.png">
|
||||
入群请添加
|
||||
<b>方同学的小助手</b>
|
||||
<!-- <b>方同学的小助手</b> -->
|
||||
<b>{{ wechat['nickname'] }}</b>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 同品牌公寓 -->
|
||||
@ -315,16 +319,23 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, onUnmounted, watch, getCurrentInstance, nextTick } from 'vue';
|
||||
import { ref, onMounted, toRefs, watch, getCurrentInstance, nextTick } from 'vue';
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { useStore } from 'vuex';
|
||||
|
||||
import pageTopBar from '../components/pageTopBar/pageTopBar.vue';
|
||||
import footerpage from '@/components/footer/footer.vue'
|
||||
import viewMap from '@/components/public/viewMap.vue'
|
||||
|
||||
import { copyToClipboard } from '@/utils/util.js'
|
||||
const uniqid = "aWqSz58aKKvn"
|
||||
// uniqid=aWqSz58aKKvn
|
||||
const { proxy } = getCurrentInstance()
|
||||
const store = useStore();
|
||||
|
||||
const { wechat } = toRefs(store.state);
|
||||
|
||||
let mapState = ref(false) // 地图弹窗状态
|
||||
|
||||
// 房间类型
|
||||
let roomList = ref([])
|
||||
@ -341,18 +352,23 @@ let attachment = ref([]) // 轮播图数据
|
||||
|
||||
let company = {} // 品牌数据
|
||||
let token = ""
|
||||
|
||||
let qrcode = ref("") // 小程序详情二维码
|
||||
|
||||
|
||||
proxy.$get("/tenement/pc/api/apartment/details", { uniqid }).then(res => {
|
||||
if (res.code != 200) return
|
||||
let data = res.data
|
||||
roomList.value = data['roomList']
|
||||
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']
|
||||
company = data['company']
|
||||
token = data['token']
|
||||
qrcode.value = data['qrcode']
|
||||
|
||||
handleNavData()
|
||||
if (data.withsameapartments > 0) dualBrandData()
|
||||
@ -1116,6 +1132,7 @@ const contactReservationService = () => {
|
||||
.QRcode-img {
|
||||
width: 103px;
|
||||
height: 103px;
|
||||
border-radius: 70px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user