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
					}
				});
			}