uni-app h5页面唤起地图软件

uni-app h5页面唤起地图软件

1、微信的js-sdk方法

// 这种方式引入失败了，所有找的配置文件下载下来再引入的
// var jwx = require('jweixin-module') 
import jwx from './wxJssdk.js'
export default {
	//判断是否在微信中    
	isWechat: function() {
		var ua = window.navigator.userAgent.toLowerCase();
		if (ua.match(/micromessenger/i) == 'micromessenger') {
			return true;
		} else {
			alert('不是微信客户端,请在微信客户端操作在,谢谢');
			return false;
		}
	},
	// 初始化JS-SDK
	initJssdk: function(callback) {
		// 获取当前url然后传递给后台获取授权和签名信息
		let url = window.location.href;
		// 向后台发送请求获取授权和签名信息
		uni.$u.http.post(`/api/JSSDK/Index`, {
				url: url
			}).then(res => {
				jwx.config({
					debug: false,// 开启调试模式,调用的所有api的返回值会在客户端alert出来
					appId: res.data.appId, // 微信appid
					timestamp: res.data.timestamp,// 生成签名的时间戳
					nonceStr: res.data.nonceStr,// 生成签名的随机串
					signature: res.data.signature,// 签名
					jsApiList: [ //这里是需要用到的接口名称  
						'checkJsApi', //判断当前客户端版本是否支持指定JS接口  
						'getLocation', //获取位置  
						'openLocation', //打开位置  
						'uploadImage' //上传图片  
					]
				});
				if (callback) {
					callback(res.data);
				}
			
		});
	},
	//在需要定位页面调用  
	getlocation: function(callback) {
		// config信息验证后会执行 ready 方法，所有接口调用都必须在 config 接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在 ready 函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在 ready 函数中。
		jwx.ready(function() {
			jwx.getLocation({
				type: 'gcj02', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'  
				success: function(res) {
					// console.log(res);  
					callback(res)
				},
				fail: function(res) {
					// console.log(res)
				},
				// complete:function(res){  
				//     console.log(res)  
				// }  
			});
		});
	},
	//打开位置
	openlocation: function(data) {
		// if (!this.isWechat()) {
		// 	//console.log('不是微信客户端')  
		// 	return;
		// }
		jwx.ready(function() {
			// console.log('openlocation',data);
			jwx.openLocation({
				latitude: data.latitude,
				longitude: data.longitude,
				name: data.name,
				address: data.address,
				scale: 14,
			});
		});
	},
	//选择图片
	chooseImage: function(callback) {
		// if (!this.isWechat()) {
		// 	//console.log('不是微信客户端')  
		// 	return;
		// }
		//console.log(data);  
		this.initJssdk(function(res) {
			jwx.ready(function() {
				jwx.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album'],
					success: function(rs) {
						callback(rs)
					}
				})
			});
		});
	},
}

2、在main.js中将配置注入全局

import jwx from './util/request/wxconfig.js'
Vue.prototype.$jwx = jwx

3、在页面中使用

// 初始化微信配置
mounted() {
	this.$jwx.initJssdk()
},
methods: {
	//定义点击事件，打开第三方地图
	jumpMap(val) {
		// 这个对象里配置地址信息（坐标名称等）等
		let addr = {}
		this.$jwx.openlocation(addr)
	}
}