vue开发的微信服务号H5内嵌的腾讯地图和导航

##需要后台配合拿到微信网页开发的sdk签名https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#1
成功拿到签名后才能引用微信的相关地理位置的开发接口。
我们这里需要使用openLocation的接口，getLocation接口是为拿到经纬度，我这里不做详细介绍，具体看官方Api
实现效果：
点击图中地图可以打开导航

图一用的是腾讯位置服务提供的地图组件使用之前需要申请一个密钥，官方链接：https://lbs.qq.com/dev/console/key/manage ，申请一个密钥就行。
图二调用的是微信公众号提供的地图导航功能。
代码如下


## ***css:***<div style="background-color:#F7F7F7;height: 10px;margin-top: 10px;"></div><div id="container" @click="showLocation()" style="background-color:#F7F7F7;width:100%;height:140px"></div><div style="background-color: #F7F7F7;height: 10px"></div>
``
***## js***export default {name: "",data() {return {}},mounted() {this.getMyLocation(); //腾讯地图定位当前的位置},methods: {//第一部分//定位获得当前位置信息getMyLocation() {var geolocation = new qq.maps.Geolocation("你刚才申请的腾讯密钥", "密钥的名字");//geolocation.getIpLocation(this.showPosition, this.showErr);geolocation.getLocation(this.showPosition, this.showErr);//用getLocation精确度比较高},showPosition(position) {console.log(position);this.latitude = position.lat;this.longitude = position.lng;this.city = position.city;console.log(this.latitude, 'this.latitude', this.longitude, 'this.longitude', this.city, 'this.city')this.setMap();},showErr() {console.log("定位失败");this.getMyLocation();//定位失败再请求定位，测试使用},//第二部分//位置信息在地图上展示setMap() {//步骤：定义map变量 调用 qq.maps.Map() 构造函数   获取地图显示容器//设置地图中心点var myLatlng = new qq.maps.LatLng(this.latitude, this.longitude);//定义工厂模式函数var myOptions = {zoom: 100,               //设置地图缩放级别center: myLatlng,    //设置中心点样式mapTypeId: qq.maps.MapTypeId.ROADMAP  //设置地图样式详情参见MapType}//获取dom元素添加地图信息var map = new qq.maps.Map(document.getElementById("container"), myOptions);//第三部分//给定位的位置添加图片标注var marker = new qq.maps.Marker({position: myLatlng,map: map});//给定位的位置添加文本标注var marker = new qq.maps.Label({position: myLatlng,map: map,content: this.shopName});},//腾讯地图导航showLocation() {let _this = thislet appId = '你公众号的appid'let url = location.href.split("#")[0];// let url =   window.location.href.split("#")[0];getJsapiSignature(appId, url).then(res => {wx.config({debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。appId: res.data.appId, // 必填，公众号的唯一标识timestamp: res.data.timestamp, // 必填，生成签名的时间戳nonceStr: res.data.nonceStr, // 必填，生成签名的随机串signature: res.data.signature,// 必填，签名jsApiList: ['openLocation'] // 必填，需要使用的JS接口列表});// config信息验证成功后会执行ready方法,所有接口调用都必须在config接口获得结果之后// config 是一个客户端的异步操作,所以如果需要在页面加载时调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行.对于用户触发是才调用的接口,则可以直接调用,不需要放在ready函数中wx.checkJsApi({ // 判断当前客户端版本是否支持指定JS接口jsApiList: ['openLocation'],success: function (res) { // 以键值对的形式返回，可用true，不可用false。如：{"checkResult":{"scanQRCode":true},"errMsg":"checkJsApi:ok"}wx.openLocation({**//经纬度要自己做处理 可以通过getLocation获取 ，我这里已经获取过了 从上个页面带过来的// 经纬度要加 parseFloat这个做处理 不然IOS不适配 只适配安卓  **latitude: parseFloat(_this.$route.query.latitude),//目的地latitudelongitude: parseFloat(_this.$route.query.longitude),//目的地longitudename: _this.$route.query.shopName,address: _this.$route.query.place,scale: 15//地图缩放大小，可根据情况具体调整});},fail: function (res) { // 检测getNetworkType该功能失败时处理alert('fail' + res)}})})},}}`在index.html页面引入js 腾讯位置服务

```

附上我获取经纬度的代码获取签名的方法上面已经写了或者可以看官方api
/获取位置经纬度/
getGeographical() {
let that = this
wx.ready(function () {
wx.getLocation({
type: “wgs84”, // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入’gcj02’
success: function (res) {
// alert(res)
that.latitude = res.latitude;
that.longitude = res.longitude;
// alert(‘纬度：’ + that.latitude + ‘经度：’ + that.longitude)
},
cancel: function () {
this.$weui.dialog({
title: “提示”,
content:
“您好！您拒绝获取地理位置。”,
ok: function () {
window.history.go(-1);
}
});
}
});
wx.error(function (res) {
// alert(res)
console.log("wx-js初始化: " + res);
});
});

},

vue开发的微信服务号H5内嵌的腾讯地图和导航相关推荐

vue开发的微信服务号的H5网页禁止点击时页面放大或者缩小
vue开发的微信服务号问题:点击H5页面时,页面会放大 ,不能固定解决方案: 1.在index.html 页面添加以下代码 width=device-width :表示宽度是设备屏幕的宽度 in ...
微信公众号h5实现高德/百度/腾讯地图导航
最近做了个微信公众号h5需求是这样的 1.点击地图进入地图详情 2.地图详情包括开始导航与地图(高德,百度,腾讯)选择,点击开始导航自动跳转该地图app 首先先理一下功能: 1:第一张图是直接显示坐标 ...
PHP 开发社区微信服务号实战图解
本博文就月初刚上线的微信服务号,图文进行总结分享给大家. 去年年底,我所在的团队讨论要开发微信号,话题由此拉开: 原来有一个3年前注册的微信号,但是后台操作无法从"订阅号"变 ...
微信公众号、内嵌H5字体受微信字体大小影响问题的解决方案
微信公众号.内嵌H5字体受微信字体大小影响问题的解决方案,代码也是之前网上找的,现在记录一下 //微信公众号禁止设置老年字体 ;(function() {if (typeof WeixinJSBrid ...
vue开发项目微信公众号授权支付开发
一.注册微信公众号服务号并填写企业信息(个人订阅号没有开发微信支付的权限) 链接: https://mp.weixin.qq.com/ 二.在微信公众号内进行微信认证(3-5个工作日) 三.在微信公众 ...
如何实现开发一个企业认证开发版微信服务号的详细步骤
题目:企业如何实现开发一个企业开发版微信公众号的详细步骤?(以PHP为例进行开发) 先附上一张流程图: 一.首先在微信公众平台官网进行注册登录,打款认证,微信公众平台小程序注册与认证详细过程看链接: ...
商城系统开发使用微信服务号和小程序那个好？
"我们开发公众号不是为了媒体,我们的本意不是传播内容,我们要提供服务,但服务号没有达到预期,我们在讨论一个新的形态,叫应用号.平时不发东西,他安静的存在在那,低频的需求不需要安装App,微信 ...
微信小程序与H5内嵌网页交互实现地图定位功能
小程序中有很多好用的API,整个项目我们是用vue实现的,使用小程序的内嵌网页功能完成交互. 使用小程序的< web-view >标签将vue项目在小程序中运行.大概的背景就是这样.接下来 ...
本地开发部署微信公众号(H5)流程和坑点
本地开发微信公众号首先先去微信公众号平台注册一下测试号然后配置js接口安全域名和回调页面域名这里本地的当然可以用用自己电脑的ip地址,也可以加端口号例:198.122.07.122:3000,不 ...

vue开发的微信服务号H5内嵌的腾讯地图和导航

vue开发的微信服务号H5内嵌的腾讯地图和导航相关推荐

最新文章

热门文章