【腾讯位置组件】微信公众号h5 调用腾讯地图组件

预览

腾讯地图官方网址

代码示例

<template><view></view>
</template>
<script>export default {name: "map",data() {return {title:'装修地址',address:'四川省成都市武侯区富美森家居1号软装馆6层',key:'QARBZ-P4BED-72F4W-HFHAQ-4EU6T-PBKQ' // 腾讯地图 key}},onShow(){this.openmap()},methods: {openmap() {window.open(`https://apis.map.qq.com/tools/poimarker?type=0&marker=coord:39.96554,116.26719;title:${this.title};addr:${this.address}
6020号&key=${this.key}&referer=zx$init_view=1`)}}}
</script>
<style lang="less"></style>

// 第二种，选择高德，百度，腾讯地图，示例图

代码实现示例

<template><view><view id="baidu-map" style="width: 100%;height: 100%;"></view><slot></slot><view class="map-btn"><view class="fix-btn" v-show="showmore"><view><text @click="initMap($event)">{{this.fixBtn[0]}}</text><text><image src="@/static/arrow_down.png" alt="" @click="showmore = !showmore" v-show="showmore"> </image></text></view><view><text @click="initMap($event)">{{this.fixBtn[1]}}</text><text></text></view></view><view class="map-type"><text @click="initMap($event)">{{defaultBtn[0]}}</text><text><image src="@/static/arrow_up.png" alt="" @click="showmore = !showmore" v-show="!showmore"></image></text></view><view class="guide-btn" @click="beginGuide">开始导航</view></view></view>
</template>
<script>
export default {name: "com-map",data() {return {btns: ['百度地图', '腾讯地图', '高德地图'],defaultBtn: ['高德地图'],fixBtn: [],showmore: false,position: [],mapObj: null,  // 地图实例userLocation: null, // 用户位置 or 中心位置geolocation: null, // 定位geocoder: null, // 地理编码type: '高德地图',//百度地图参数center: { lng: 109.45744048529967, lat: 36.49771311230842 },zoom: 13,GCJPosition: {lat: 0,lng: 0},//微信获取的当前定位curP: [],bdPosition: []}},methods: {//点击切换地图initMap(e) {this.showmore = falsethis.defaultBtn[0] = e.target.innerHTMLthis.filterBtn()this.type = e.target.innerHTMLswitch (e.target.innerHTML) {case '百度地图': this.initBMap(); break;case '腾讯地图': this.initTMap(); break;case '高德地图': this.initAMap(); break;}},//开始导航beginGuide() {switch (this.type) {case '百度地图':window.location.href = `http://api.map.baidu.com/direction?origin=latlng:${this.curP[1]},${this.curP[0]}|name:我的位置&destination=${this.bdPosition[1]},${this.bdPosition[0]}&mode=driving&region=上海&output=html`;break;case '腾讯地图':window.location.href = `https://apis.map.qq.com/uri/v1/routeplan?type=bus&to=终点&tocoord=${this.position[1]},${this.position[0]}&referer=PGCBZ-7XVC3-XKO36-3CEGN-B2L63-XYBHT`;break;case '高德地图':window.location.href = `http://uri.amap.com/marker?position=${this.position[0]},${this.position[1]}&coordinate=gaode&callnative=1`break;}},//从微信jssdk获取当前定位getConfig() {let that = this// 接口调用this.$api.weixinjs().then(res => {wx.config({beta: true,debug: true, //开启debug模式.正式环境设置为false,测试环境设置为trueappId: res.data.appId, // 必填，公众号的唯一标识timestamp: res.data.timestamp, // 必填，生成签名的时间戳nonceStr: res.data.nonceStr, // 必填，生成签名的随机串signature: res.data.signature,// 必填，签名，见附录1jsApiList: ['checkJsApi', 'getLocation', 'openLocation'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2});wx.checkJsApi({jsApiList: ['getLocation'],success: function (res) {if (res.checkResult.getLocation == false) {that.$toast('你的微信版本太低，不支持微信JS接口，请升级到最新的微信版本！');return;}},fail: function (res) {console.log('checkJsApi fail=' + JSON.stringify(res))}});// 1, 微信公众号 授权 手机号，每点击一次，授权一次// 2，微信公众号，地图// 获取地理位置接口wx.ready(function () {wx.getLocation({type: "gcj02", //jssdk获取的坐标类型success: function (res) {console.log(res, 'success')that.GCJPosition.lat = res.latitude //纬度that.GCJPosition.lng = res.longitude //经度},cancel: function (res) {console.log(res, 'cancel')},fail: function (res) {console.log('fail', res)}});})})},// 初始化高德地图initAMap() {this.showmore = false// 实例化地图var mapObj = new AMap.Map('baidu-map', {resizeEnable: true,zoom: 17,zooms: [8, 17]});this.mapObj = mapObj;if (location.href.indexOf('&guide=1') !== -1) {mapObj.setStatus({ scrollWheel: false })}// 加载定位插件this.addGeolocationPlugin();// 加载地理编码插件this.addGeocoderPlugin();// 绑定地图移动事件let that = this;setTimeout(function () {that.getLocation();}, 500)this.addMark(this.position)},// 初始化百度地图initBMap() {console.log('初始化百度地图', this.GCJPosition)this.showmore = falselet map = new BMap.Map('baidu-map');var point = new BMap.Point(168.95, 34.27);map.centerAndZoom(point, 18);let that = thisthis.bdPosition = this.$map.GCJtobd09(this.position[0], this.position[1])this.curP = this.$map.GCJtobd09(that.GCJPosition.lng, that.GCJPosition.lat) //当前坐标(gcj02)转成百度坐标let pt = new BMap.Point(this.bdPosition[0], this.bdPosition[1]);var mk = new BMap.Marker(pt);map.addOverlay(mk);//标出所在地map.panTo(pt);//地图中心移动var point = new BMap.Point(this.position[0], this.position[1]);//用所定位的经纬度查找所在地省市街道等信息console.log(this.GCJPosition, this.position)mk.addEventListener("click", function (e) {window.location.href = `http://api.map.baidu.com/direction?origin=latlng:${this.curP[1]},${this.curP[0]}|name:我的位置&destination=${this.bdPosition[1]},${this.bdPosition[0]}&mode=driving&region=上海&output=html`;});},// 初始化腾讯地图initTMap() {console.log('初始化腾讯地图')this.showmore = falselet that = thisvar myLatlng = new qq.maps.LatLng(this.position[1], this.position[0]);//定义工厂模式函数var myOptions = {zoom: 17,               //设置地图缩放级别center: myLatlng,      //设置中心点样式mapTypeId: qq.maps.MapTypeId.ROADMAP  //设置地图样式详情参见MapType}//获取dom元素添加地图信息var map = new qq.maps.Map(document.getElementById("baidu-map"), myOptions);var latlngs = [new qq.maps.LatLng(this.position[1], this.position[0])];for (var i = 0; i < latlngs.length; i++) {(function (n) {//实例标注var marker = new qq.maps.Marker({position: latlngs[n],map: map});//标注点击事件qq.maps.event.addListener(marker, 'click', function (e) {window.location.href = `https://apis.map.qq.com/uri/v1/routeplan?type=bus&to=终点&tocoord=${that.position[1]},${that.position[0]}&referer=PGCBZ-7XVC3-XKO36-3CEGN-B2L63-XYBHT`;});})(i);}},// 高德地图加标记addMark(position) {var marker = new AMap.Marker({content: '<view class="marker-route marker-marker-bus-from locationMarker"></view>',offset: new AMap.Pixel(-13, -34),position: position});this.mapObj.setCenter(position);this.userLocation = marker;this.userLocation.setMap(this.mapObj);marker.on('click', function (e) {marker.markOnAMAP({position: marker.getPosition()})})},getLocation() {this.geolocation.getCurrentPosition(); // 定位},addGeocoderPlugin: function () {this.mapObj.plugin(['AMap.Geocoder'], () => {this.geocoder = new AMap.Geocoder();});},addGeolocationPlugin: function () {this.mapObj.plugin(['AMap.Geolocation'], () => {this.geolocation = new AMap.Geolocation({enableHighAccuracy: true, //是否使用高精度定位，默认:truetimeout: 10000, //超过10秒后停止定位，默认：无穷大maximumAge: 0, //定位结果缓存0毫秒，默认：0showButton: false,convert: true, //自动偏移坐标，偏移后的坐标为高德坐标，默认：trueshowMarker: false, //定位成功后在定位到的位置显示点标记，默认：trueshowCircle: false, //定位成功后用圆圈表示定位精度范围，默认：truepanToLocation: false, //定位成功后将定位到的位置作为地图中心点，默认：truezoomToAccuracy: true //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false});this.mapObj.addControl(this.geolocation);AMap.event.addListener(this.geolocation, 'complete', (data) => {console.log('定位成功', data.position)this.GCJPosition.lat = data.position.latthis.GCJPosition.lng = data.position.lng});AMap.event.addListener(this.geolocation, 'error', (data) => {console.log('定位失败')});});},filterBtn() {this.fixBtn = this.btns.filter(item => this.defaultBtn.indexOf(item) < 0)}},created() {this.getConfig()this.filterBtn()}
}
</script>
<style lang="less">
.smnoprint {display: none; //去掉腾讯地图放大缩小控件
}
.amap-info-content {font-size: 12px;
}#myPageTop {position: absolute;top: 5px;right: 10px;background: #fff none repeat scroll 0 0;box-shadow: -1px -1px 10px rgba(0, 0, 0, 0.08);margin: 0.2rem auto;padding: 0.2rem;font-family: "Microsoft Yahei", "微软雅黑", "Pinghei";font-size: 14px;
}
#myPageTop label {margin: 0 20px 0 0;color: #666666;font-weight: normal;
}
#myPageTop input {width: 4rem;height: 0.5rem;border: 1px solid #c6c6c6;padding: 0 10px;
}
#myPageTop .column2 {padding-left: 25px;
}
.amap-sug-result {z-index: 99999;
}
.map-btn {display: flex;position: absolute;width: 100%;bottom: 0;left: 0;height: 100px;background-color: #fff;.map-type {width: 50%;text-align: center;background-color: #fff;line-height: 100px;font-size: 34px;color: #2c96f6;display: flex;justify-content: center;align-items: center;text:nth-child(1) {margin-right: 10px;}text:nth-child(2) {display: flex;align-items: center;width: 30px;image {width: 100%;}}}.guide-btn {width: 50%;text-align: center;background-color: #2c96f6;line-height: 100px;font-size: 34px;color: #fff;}.fix-btn {width: 50%;position: absolute;bottom: 100px;left: 0;text-align: center;view {height: 100px;line-height: 100px;background-color: #fff;font-size: 34px;color: #2c96f6;display: flex;justify-content: center;align-items: center;text:nth-child(1) {margin-right: 10px;}text:nth-child(2) {display: flex;align-items: center;width: 30px;image {width: 100%;}}}}
}
</style>

【腾讯位置组件】微信公众号h5 调用腾讯地图组件相关推荐

微信公众号H5项目中用高德地图实现用户定位（vue）
遇到的问题:用高德官网的方法去定位时发现,ios可以在http的网址定位,而安卓手机只能在https的网址定位,这个也是很奇葩,查了官网文档说,是因为浏览器禁止了非安全域的定位请求.但是我们的站点就是 ...
uni-app 微信公众号H5开发里面的video 组件点击全屏后不会自动横屏播放 2
文章目录前言一.废话不多说直接上代码总结前言根据上次发布的文章进一步改善了全屏横屏播放,去除了导航栏,实现伪全屏,但是ios系统不行,只能用自带的全屏按钮,让用户点击. 来点我遇到的问题吧 ...
微信公众号h5实现高德/百度/腾讯地图导航
最近做了个微信公众号h5需求是这样的 1.点击地图进入地图详情 2.地图详情包括开始导航与地图(高德,百度,腾讯)选择,点击开始导航自动跳转该地图app 首先先理一下功能: 1:第一张图是直接显示坐标 ...
微信公众号H5页面开发--微信JS-SDK引用
微信公众号H5页面开发–微信JS-SDK引用微信提供了微信公众号开发者手册,官方地址:https://mp.weixin.qq.com/ 公众号内许多复杂的业务场景,都是通过网页形式来提供服务,这时 ...
微信公众号HTML5接入腾讯云人脸核身
微信公众号HTML5接入腾讯云人脸核身概述接入流程原生H5对行业的要求概述针对微信公众号接入腾讯云,腾讯云提供了两种方案,一种是通用H5接入,另外一种是通过微信的原生H5来接入,但是一般都是 ...
php h5微信公众号支付接口,微信公众号H5支付接口调用方法
本文实例为大家分享了微信内h5调用支付接口的具体代码,供大家参考,具体内容如下官方文档微信公众号h5接口调用 // 判断微信版本是否在5.0以上 // window.navigator.user ...
微信小程序webview清除缓存、微信公众号h5清除缓存、页面白屏、空白、不刷新问题
一.缓存带来的问题和原因我们在发布新版本的时候,在打开微信小程序webview嵌套的h5页面或微信公众号h5页面时,常常会发现页面还是上个版本的旧页面或者打开直接空白白屏了,那么为什么会存在这个问 ...
uniapp 开发微信公众号H5 隐藏右上角扩展按钮
uniapp 开发微信公众号H5 隐藏右上角扩展按钮 1.首先使用npm安装一下微信的jsApi (这个应该都会吧就跟vue使用npm安装依赖一样) 初始化: npm init -y 安装微信模块: ...
【微信公众号H5授权登录】
微信公众号H5授权登录废话不多,直接上代码(这里只写代码的实现) 废话不多,直接上代码(这里只写代码的实现) 页面进来判断微信环境 onShow() {//设置初始值为false,微信环境下才能打开 ...

【腾讯位置组件】微信公众号h5 调用腾讯地图组件

【腾讯位置组件】微信公众号h5 调用腾讯地图组件相关推荐

最新文章

热门文章

【腾讯位置组件】 微信公众号h5 调用腾讯地图组件

【腾讯位置组件】 微信公众号h5 调用腾讯地图组件相关推荐

最新文章

热门文章

【腾讯位置组件】微信公众号h5 调用腾讯地图组件

【腾讯位置组件】微信公众号h5 调用腾讯地图组件相关推荐