uni-app小程序端调内置地图和打开外部app和调拨打电话

效果如图:
在这里插入图片描述
部分代码如下:

1.html代码

			<view class="service">
				<a href="#" @click.prevent="openMap">
					<image src="../../static/navigation.png" mode=""></image>到这去
				</a>
				<text class="cut-rule"></text>
				<a href="#" @click.prevent="openPhone">
					<image src="../../static/phone.png" mode=""></image>打电话
				</a>
			</view>

2.js代码

export default {
		data() {
			return {

			};
		},
		onLoad: function(option) {
		
		},
		methods: {
			// 打开map地图
			openMap() {
				let that = this
				uni.openLocation({
					latitude: '纬度',
					longitude: '经度',
					scale: 12,
					success: function() {
						console.log('success');
					}
				});

				var map = uni.createMapContext('map');
				map.moveToLocation();
			},
			// 拨打电话
			openPhone() {
				uni.makePhoneCall({
					// 手机号
					phoneNumber: this.schoolInfo.concatUserPhone,
					// 成功回调
					success: (res) => {
						console.log('调用成功!')
					},

					// 失败回调
					fail: (res) => {
						console.log('调用失败!')
					}

				});
			}
	}

3.less代码

			.service {
				margin-top: 10upx;
				display: flex;
				height: 80upx;
				background-color: #F4F4F4;

				a {
					line-height: 80upx;
					flex: 1;
					text-align: center;
					color: #575757;
					vertical-align: middle;

					image {
						width: 34upx;
						height: 34upx;
						vertical-align: middle;
						margin-right: 8rpx;
					}
				}

4.获取当前地理位置(根据具体情况使用)

// 获取当前地理位置信息
			getLocation() {
				uni.getLocation({
					type: 'wgs84',
					success: async (res) => {
							"当前经度": res.longitude,
							"当前纬度": res.latitude
					}
				});
			}
发布了34 篇原创文章 · 获赞 13 · 访问量 4913

猜你喜欢

转载自blog.csdn.net/qq_40544291/article/details/103521254