uniapp h5 腾讯地图根据经纬度显示位置，并打开手机导航

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, //图片的本地IDsuccess: 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 += `。。。。。。。。`;//当前页面访问urlconst { 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

uniapp h5 腾讯地图根据经纬度显示位置，并打开手机导航相关推荐

java调用腾讯地图根据经纬度获取位置信息
这是java提交经纬度信息,然后获取该经纬度所在省市区的一个方法,话不多说直接上代码: package com.lmj.util;import net.sf.json.JSONObject; impo ...
微信小程序-腾讯地图根据经纬度获取位置与根据位置获取经纬度
注意:如果request非法,请移步到上一篇博客填写request合法域名章节,上一篇博客末尾也有写道获取当前定位得方法一.根据经纬度获取位置信息登陆腾讯地图官网,选择控制台,选择开发文档- ...
C#腾讯地图Web端定位地址搜索及手机导航
前段时间项目涉及到腾讯地图的业务,这里马克一下. 一开始做腾讯地图功能完全是懵逼的,一搜网上做百度地图居多,问为什么不用百度地图,原因是后面会衔接微信,百度定图定位会有偏差,网上一搜,果真有不少网友吐 ...
H5 腾讯地图无法导航
uni-app 打包H5腾讯地图无法导航前言: 解决方案如下: 具体使用查看二维码前言: 最近几天用uni-app开发安卓和iOS应用,打包成APP安装包后,APP内做地图导航没有问题,APP内使 ...
html调用腾讯地图定位当前位置,vue web项目中调用腾讯地图API获取当前位置的经纬度...
vue web项目中调用腾讯地图API获取当前位置的经纬度 vue web项目中调用腾讯地图API获取当前位置的经纬度在main.js 中添加一下代码 import axios from 'axio ...
vue h5 腾讯地图路线规划
vue h5腾讯地图定位传送门代码如下:在微信浏览器中会弹出是否打开第三方点击取消则打开内置腾讯点击去则跳转腾讯地图app location.href = https://apis.map.q ...
java腾讯地图根据经纬度获取具体位置
腾讯地图 java腾讯地图根据经纬度获取具体位置 java腾讯地图根据经纬度获取具体位置 package com.fengdi.lianmeng.util.tencent;import com.fen ...
vue使用腾讯地图获取经纬度和逆解析获取详细地址
vue使用腾讯地图获取经纬度和逆解析获取详细地址示例必须在腾讯api中申请自己的key 打开这个webservice用来逆解析详细地址下面是代码 1 , html创建放地图的容器 <div ...
手机端或PC端利用高德地图和腾讯地图获取用户当前位置信息
目录一.简介二.高德地图三.腾讯地图四.总结一.简介最近在项目中,有需要使用到获取用户当前地理位置信息的功能,获取当前用户位置保存到数据库中的场景,并且需要支持多种地图定位方式,我这里采用 ...
微信端H5使用百度地图定位获取当前位置安卓定位不准
微信端H5使用百度地图定位获取当前位置安卓定位不准的问题解决如下: 使用微信端定位,签名方法看微信接口文档: <script type="text/javascript"&g ...

uniapp h5 腾讯地图根据经纬度显示位置，并打开手机导航

uniapp h5 腾讯地图根据经纬度显示位置，并打开手机导航相关推荐

最新文章

热门文章