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

浅浅的花香味﹌ 2022-11-29 13:25 290阅读 0赞

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L211Z2UxMTYxMTA1NDAz_size_16_color_FFFFFF_t_70_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L211Z2UxMTYxMTA1NDAz_size_16_color_FFFFFF_t_70_pic_center]: /images/20221124/35d84aa272e043f0a0cce2231b18b374.png