<template>
<view class="page-body">
<view class="page-section page-section-gap">
<map style="width: 100%; height:calc(100vh - 120rpx);" :circles="circles" :polyline='polyline' :scale="scale"
:latitude="latitude" :longitude="longitude" :markers="markers" @callouttap="callouttap" @controltap="controltap"
:enable-3D="true" :show-compass="true" :enable-overlooking="true" :enable-traffic="true" @markertap="markertap">
</map>
</view>
<view class="bottom">
<view class="left">
<view class="img">
<image src="../../static/img/avatar.png" mode=""></image>
</view>
<view class="detail">
<text>{{storeNmae}}</text>
<text>联系电话:{{phone}}</text>
</view>
<view class="toAddress" @tap="toAddress">
到这去
</view>
</view>
<view class="icon" @tap="callPhone">
<image src="../../static/shop/call-phone.png" mode=""></image>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
storeNmae: '欧莱雅',
phone: '1123121321',
id: 1,
title: 'map',
latitude: 23.124455,
longitude: 113.39555,
markers: [{
title:'欧莱雅',
id: 2,
latitude: 23.115702,
longitude: 113.390203,
callout: {
content: '欧莱雅12313',
color: '#000000',
fontSize: 12,
borderRadius: 5,
display:'ALWAYS'
}
}, ],
scale: 15,
circles: [{
latitude: 23.115702,
longitude: 113.390203,
fillColor: "#ffffff",
color: "#000000",
radius: 50,
strokeWidth: 4
}],
polyline: [{
points: [{
latitude: 23.124455,
longitude: 113.39555,
},
{
latitude: 23.115702,
longitude: 113.390203,
},
],
color: "#11479D",
width: 5,
dottedLine: true,
arrowLine: true,
}],
};
},
onLoad() {
console.log(this.bd_encrypt(113.401879, 23.130747), 66);
},
methods: {
toAddress(){
uni.openLocation({
latitude: this.latitude,
longitude: this.longitude,
success: function() {
console.log('success');
}
});
},
markertap() {
console.log('markertap');
},
callPhone() {
uni.makePhoneCall({
phoneNumber: this.phone
})
},
callouttap() {
console.log('callouttapClick');
uni.openLocation({
latitude: this.latitude,
longitude: this.longitude,
success: function() {
console.log('success');
}
});
},
controltap() {
console.log('controltap');
},
bd_encrypt(lng, lat) {
var X_PI = Math.PI * 3000.0 / 180.0;
var x = lng - 0.0065,
y = lat - 0.006;
var z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * X_PI);
var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * X_PI);
var bd_lng = z * Math.cos(theta);
var bd_lat = z * Math.sin(theta);
return {
bd_lat: bd_lat,
bd_lng: bd_lng
};
}
}
}
</script>
<style lang="less" scoped>
.bottom {
bottom: 0;
left: 0;
position: absolute;
width: 100%;
height: 120rpx;
background-color: #fff;
z-index: 9;
padding: 15rpx;
display: flex;
justify-content: space-between;
align-items: center;
.left {
display: flex;
align-items: center;
height: 100%;
width: 600rpx;
box-sizing: border-box;
.img {
height: 100%;
>image {
height: 100%;
width: 80rpx;
}
}
.detail {
display: flex;
flex-direction: column;
margin-left: 20rpx;
& text:first-child {
font-size: 27rpx;
color: #000000;
font-weight: 500;
}
& text:last-child {
font-size: 25rpx;
color: rgba(0, 0, 0, .7)
}
}
.toAddress{
margin-left: 50rpx;
height: 80%;
width: 160rpx;
justify-content: center;
display: flex;
border-radius: 60rpx;
align-items: center;
font-size: 26rpx;
font-weight: 600;
border: 1rpx solid rgba(0,0,0,.5);
}
}
.icon {
height: 65rpx;
width: 65rpx;
>image {
height: 100%;
width: 100%;
}
}
}
</style>
