Uniapp 微信小程序直接打开地图App （不经过内置地图页）

说明

1. 该方法依赖 map组件，如果页面不需要展示地图可直接将地图隐藏 display:none; 即可。

2. 如需展示则赋值给 map组件 属性id即可。只是调用组件内的 openMapApp 方法，不影响组件本身。

3. 参数说明参考 MapContext.openMapApp

效果图

代码块

<template>
	<view class="content">
		<map id="myMap" style="display: none;"/>
		
		<view class="input-box">
			<text>经度：</text>
			<input type="number" v-model="longitude" />
		</view>
		
		<view class="input-box">
			<text>纬度：</text>
			<input type="number" v-model="latitude" />
		</view>
		
		<view class="input-box">
			<text>名字：</text>
			<input type="text" v-model="destination" />
		</view>
		
		<button type="default" @click="openMap">打开地图App</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				longitude:0,
				latitude:0,
				destination:'目的地目的地'
			}
		},
		mounted() {
			let _this = this;
			
			uni.getLocation({
				success(res) {
					_this.latitude = res.latitude;
					_this.longitude = res.longitude;
				}
			})
		},
		methods: {
			openMap(){
				let mapContext = uni.createMapContext("myMap");
				mapContext.openMapApp({
					latitude: Number(this.latitude),
					longitude: Number(this.longitude),
					destination: this.destination,
					success() {
						console.log('success!!');
					},
					fail() {
						console.log('fail!!');
					},
					complete() {
						console.log('complete!!');
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	
	.input-box{
		display: flex;
		align-items: center;
		input{
			flex: 1;
			display: inline-block;
			border: 1rpx solid rgba(0,0,0,.2);
			border-radius: 8rpx;
		}
		margin: 30rpx;
	}
	
</style>