uni-app map地图组件的基本使用

<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>