1、安装jweixin-module包 npm i -s jweixin-module

2、在根目录下新建common文件夹并在文件夹下新建wx-sdk.js

const jweixin = require('jweixin-module');
export default {
	//判断是否在微信中    
	isWechat: function() {
		var ua = window.navigator.userAgent.toLowerCase();
		return ua.match(/micromessenger/i) == 'micromessenger'
	},
	initJssdk: function(signPackage, callback) {
		jweixin.config({
			debug: false,
			appId: signPackage.appId,
			timestamp: signPackage.timestamp,
			nonceStr: signPackage.nonceStr,
			signature: signPackage.signature,
			jsApiList: [ //这里是需要用到的接口名称  
				'checkJsApi', //判断当前客户端版本是否支持指定JS接口  
				'onMenuShareAppMessage', //分享接口  
				'getLocation', //获取位置  
				'openLocation', //打开位置  
				'scanQRCode', //扫一扫接口  
				'chooseWXPay', //微信支付  
				'chooseImage', //拍照或从手机相册中选图接口  
				'previewImage', //预览图片接口  
				'uploadImage' //上传图片  
			]
		});
		if (callback) callback()
	},
	//在需要定位页面调用  
	getlocation: function(callback) {
		if (!this.isWechat()) {
			//console.log('不是微信客户端')  
			return;
		}
		this.initJssdk(function(res) {
			jweixin.ready(function() {
				jweixin.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, callback) { //打开位置  
		jweixin.ready(function() {
			jweixin.openLocation({ //根据传入的坐标打开地图  
				latitude: data.latitude,
				longitude: data.longitude,
				name: data.name,
				address: data.address,
				scale: 14
			});
		});
	},
	previewImage: function(url) {
		console.log('开始预览')
		jweixin.previewImage({
			current: url, // 当前显示图片的http链接
			urls: [url] // 需要预览的图片http链接列表
		})
	},
	getLocalImgData: function(localId, callback) {

		jweixin.getLocalImgData({
			localId, //图片的本地ID
			success: function(res) {
				if (res.localData) {
					console.log('开始压缩')
					jweixin.compressImage({
						src: res.localData,
						success: function(res) {
							console.log(res, '压缩结果')
						}
					})
				}
				callback(res)
			}
		})
	},
	chooseImage: function(callback) { //选择图片  
		jweixin.ready(function() {
			jweixin.chooseImage({
				count: 1,
				sizeType: ['compressed'],
				sourceType: ['album', 'camera'],
				success: function(res) {
					console.log('======', res, '=====')
					callback(res)
				}
			})
		});
	},
	//微信支付  
	wxpay: function(data, callback) {
		if (!this.isWechat()) {
			//console.log('不是微信客户端')  
			return;
		}
		this.initJssdk(function(res) {
			jweixin.ready(function() {
				jweixin.chooseWXPay({
					timestamp: data.timestamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符  
					nonceStr: data.nonceStr, // 支付签名随机串，不长于 32 位  
					package: data.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）  
					signType: data.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'  
					paySign: data.paysign, // 支付签名  
					success: function(res) {
						// console.log(res);  
						callback(res)
					},
					fail: function(res) {
						callback(res)
					},
					// complete:function(res){  
					//     console.log(res)  
					// }  
				});
			});
		});
	}
}

3、引入map地图显示

<view>
<map
	:scale="14"
	:show-location="true"
	:show-compass="true"
	style="width: 100%; height: 300px;"
	:latitude="+address.latitude"
	:longitude="+address.longitude"
	:markers="markers"
	@markertap="handleOpen"
	@callouttap="handleOpen"
/>
</view>


import wxSdk from '@/common/wx-sdk.js';
export default {
        data() {
            position: { 
                latitude: '', 
                longitude: '', 
                name: '标记点名称打开腾讯地图时按此内容搜索', 
                address: '标记点地址'
            },
            signPackage: {}//调用wxjsapi需要后端生成参数
        },
	    computed: {
		   markers() {
			  const { longitude, latitude } = this.position;
			  return [
				  {
					 id: 0,
					 latitude, //纬度
					 longitude, //经度
					 iconPath: '', //显示的图标
					 rotate: 0, // 旋转度数
					 width: 15, //宽
					 height: 15, //高
					 title: '标记位置', //标注点名
					 alpha: 0.5, //透明度
					 callout: {
					   //自定义标记点上方的气泡窗口 点击有效
					   content: this.info.address, //文本
					   color: '#ffffff', //文字颜色
					   fontSize: 12, //文本大小
					   borderRadius: 2, //边框圆角
					   bgColor: '#00c16f', //背景颜色
					   display: 'ALWAYS' //常显
					 }
				  }
			  ];
		 }
	},
	methods: {
     bMapToQQMap(lng, lat) {
      //将百度地图经纬度转换成腾讯地图经纬度，后端使用的是百度地图，所以前端需要转换
	if (lng == null || lng == '' || lat == null || lat == '') return [lng, lat];
	var x_pi = 3.14159265358979324;
	var x = parseFloat(lng) - 0.0065;
	var y = parseFloat(lat) - 0.006;
	var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi);
	var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi);
	var lng = (z * Math.cos(theta)).toFixed(7);
	var lat = (z * Math.sin(theta)).toFixed(7);
	return [lng, lat];
	},
		 
	async getSignPackage() {
	url += `。。。。。。。。`;//当前页面访问url
	const { data } = await this.request('请求地址', { url }, 'POST');
	const { result = {} } = data;
	this.signPackage = result;
    wxSdk.initJssdk(this.signPackage);//初始化微信
    },
    handleOpen() {
	console.log('打开地图');
	wxSdk.openlocation(this.position);
	}
}

4、注意事项 

（1）后端存的经纬度如果是腾讯就不用转换，如果是其他地图经纬度需要转换成腾讯，不然map显示位置不准

  (2)  调式需在微信开发者工具调试，不然微信jsapi不能调用

  (3)  地图打开时导航时是按name 搜索导航的，如果name值不能精确位置，可以把address的值在openLocation赋值给name