微信小程序调用腾讯导航

微信小程序调用腾讯导航

<!-- 防止点击事件触发无效 -->
<view class="mask" @click="getLocation"></view>
<map v-if="navigation" :latitude="navigation.latitude" :longitude="navigation.longitude" :markers="covers">
	<cover-view slot="callout">
		<cover-view class="map-card" marker-id="1">
			<cover-view class="info">
				<cover-view>
					<cover-view class="title">{{ navigation.law_name }}</cover-view>
					<cover-view class="text">{{ navigation.law_address }}</cover-view>
				</cover-view>
				<cover-view class="option">
					<cover-image src="../../static/images/icon-navigation.png" mode=""></cover-image>
					<cover-view>导航</cover-view>
				</cover-view>
			</cover-view>
			<cover-view class="phone">
				<cover-view class="text">
					<cover-image src="../../static/images/icon-tel.png" mode=""></cover-image>
					<cover-view>{{ navigation.contact_phone }}</cover-view>
				</cover-view>
				<cover-view class="text">
					<cover-image src="../../static/images/icon-time.png" mode=""></cover-image>
					<cover-view>{{ navigation.work_time }}</cover-view>
				</cover-view>
			</cover-view>
		</cover-view>
	</cover-view>
</map>

data(){
	return{
		covers: [
			{
				id: 1,
				latitude: '',
				longitude: '',
				iconPath: '../../static/images/icon-loac.png',
				width: 25,
				height: 32,
				customCallout: {
					anchorY: -5,
					anchorX: 0,
					display: 'ALWAYS'
				}
			}
		]
	}
}

methods:{
	getLocation() {
		let plugin = requirePlugin('routePlan');
		let key = ''; //使用在腾讯位置服务申请的key
		let referer = ''; //调用插件的app的名称
		let endPoint = JSON.stringify({
			//终点
			name: this.navigation.law_name,
			latitude: this.covers[0].latitude,
			longitude: this.covers[0].longitude
		});
		uni.navigateTo({
			url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer + '&endPoint=' + endPoint
		});
	}
}

manifest.json
调用地图插件

/* 小程序特有相关 */
"mp-weixin" : {
	"plugins": {
		"routePlan": {
			"version": "1.0.8",
			"provider": "yourAppid"
		}
	}
 },