<script setup>
|
import { onMounted, onUnmounted, defineProps, ref } from 'vue'
|
import AMapLoader from '@amap/amap-jsapi-loader'
|
import posImg from '@/assets/images/about/adress.png'
|
|
const props = defineProps({
|
contactUsData: {
|
type: Object,
|
},
|
})
|
|
let dataStr = props.contactUsData
|
let map = null
|
let showDailog = ref(true)
|
|
const clearMarker = (e) => {
|
showDailog.value = true
|
}
|
|
const close = (e) => {
|
showDailog.value = false
|
}
|
|
onMounted(() => {
|
AMapLoader.load({
|
key: '328ca554937f0d1c9f79ea3621136eed', // 申请好的Web端开发者Key，首次调用 load 时必填
|
version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
|
plugins: ['AMap.Scale'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
|
})
|
.then((AMap) => {
|
map = new AMap.Map('container', {
|
// 设置地图容器id
|
viewMode: '3D', // 是否为3D地图模式
|
zoom: 15.5, // 初始化地图级别
|
center: [116.413823, 39.912052], // 初始化地图中心点位置
|
})
|
const position = new AMap.LngLat(116.413823, 39.912052) //Marker 经纬度
|
const markerContent = `<div class="custom-content-marker" onclick="clearMarker()"><img style="width:40px" src="${posImg}"></div>`
|
const marker = new AMap.Marker({
|
position: position,
|
content: markerContent, //将 html 传给 content
|
offset: new AMap.Pixel(-13, -30), //以 icon 的 [center bottom] 为原点
|
})
|
map.add(marker)
|
document.querySelector('.custom-content-marker').onclick = clearMarker
|
})
|
.catch((e) => {
|
console.log(e)
|
})
|
})
|
|
onUnmounted(() => {
|
map?.destroy()
|
})
|
</script>
|
|
<template>
|
<div id="container">
|
<div class="content" id="con" v-show="showDailog">
|
<div class="title">
|
<span class="text">联系我们</span>
|
<el-icon class="icon" @click="close"><Close /></el-icon>
|
</div>
|
<div class="tips">
|
<img src="@/assets/images/about/map-marker.png" alt="" />
|
<span>地址：{{ dataStr?.address ?? '-' }}</span>
|
</div>
|
<div class="tips">
|
<img src="@/assets/images/about/email.png" alt="" />
|
<span>邮编：{{ dataStr?.postalCode ?? '-' }}</span>
|
</div>
|
<div class="tips">
|
<img src="@/assets/images/about/phone.png" alt="" />
|
<span>总机：{{ dataStr?.telphone ?? '-' }}</span>
|
</div>
|
<div class="tips">
|
<img src="@/assets/images/about/chuanzhen.png" alt="" />
|
<span>邮箱：{{ dataStr?.mailbox ?? '-' }}</span>
|
</div>
|
<div class="tips">
|
<img src="@/assets/images/about/webpeizhi.png" alt="" />
|
<span>网站：{{ dataStr?.website ?? '-' }}</span>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<style lang="less" scoped>
|
#container {
|
width: 100%;
|
height: 557px;
|
position: relative;
|
|
.content {
|
width: 260px;
|
height: 230px;
|
background: #525252;
|
border-radius: 10px 10px 10px 10px;
|
position: absolute;
|
z-index: 99;
|
top: 35%;
|
left: 55%;
|
color: #fff;
|
padding: 20px;
|
font-family: Microsoft YaHei UI;
|
|
.title {
|
width: 100%;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-bottom: 20px;
|
|
.text {
|
font-weight: 600;
|
font-size: 20px;
|
color: #ffffff;
|
}
|
|
.icon {
|
font-size: 18px;
|
cursor: pointer;
|
}
|
}
|
|
.tips {
|
font-size: 14px;
|
line-height: 18px;
|
margin-bottom: 10px;
|
display: flex;
|
justify-content: flex-start;
|
align-items: flex-start;
|
|
span{
|
line-height: 24px;
|
}
|
|
img {
|
width: 20px;
|
margin-right: 8px;
|
}
|
}
|
}
|
}
|
</style>
|
