微信小程序进行地图导航,地图展示功能

(1)点击调用微信内置地图 wx.getLocation 会弹出自己的授权框

页面调用js： 点击调用\onLoad里面调用
address(){wx.getLocation({//获取当前经纬度type: 'wgs84', //返回可以用于wx.openLocation的经纬度，//官方提示bug: iOS 6.3.30 type 参数不生效，只会返回 wgs84 类型的坐标信息  success: function (res) {wx.openLocation({//使用微信内置地图查看位置。latitude: 22.5542080000,//要去的纬度-地址longitude: 113.8878770000,//要去的经度-地址name: "宝安中心",address: '宝安中心A地铁口'})}})},app.json:在微信小程序开发中，需要获取用户所在地理位置，结果提示‘getLocation需要在app.json中声明permission字段’"permission": {"scope.userLocation": {"desc": "你的位置信息将用于小程序位置接口的效果展示"}}onLoad: function () {this.address() //全屏地图
},

1.先加载wx.getLocation弹出自己的授权框，如图

2.再调用 wx.openLocation

也可以直接使用：好像不弹出授权亲测

//地图导航navigation(e) {//let infos = e.currentTarget.dataset.info;wx.openLocation({//使用微信内置地图查看位置。latitude: 22.5542080000,//要去的纬度-地址longitude: 113.8878770000,//要去的经度-地址name: "宝安中心A地铁口", //地名address: '宝安中心A地铁口' //详细地址scale: 18 //缩放比例})},

（2）地图map展示(规定大小)

https://blog.csdn.net/huangbaokang/article/details/96461739

https://blog.csdn.net/weixin_39378691/article/details/85067600

<!-- 地图 -->
<view class='maps'><view class="page-section page-section-gap"><mapid="myMap"style="width: 100%; height: 600rpx; border-radius: 20px;"latitude="{{latitude}}"longitude="{{longitude}}"markers="{{markers}}"show-location></map><!-- bindtap="getLoc" --></view>
</view>js:
data: {location: "",latitude: "",longitude: "",// 图标定位markers: [],},
onLoad: function () {this.getAddressDetail()
},/*** 获取地理位置信息详情*/getAddressDetail: function () {let that = this;wx.getLocation({type: 'wgs84',// 参考系success: function (res) {var latitude = res.latitude;var longitude = res.longitude;console.log("纬度=" + latitude + " 经度=" + longitude);// 构建标注var marker = {id: 1,latitude: latitude,longitude: longitude,width: 50,height: 50}var markers = new Array();markers.push(marker);that.setData({ latitude: latitude, longitude: longitude, markers: markers });// 构建请求地址var qqMapApi = 'http://apis.map.qq.com/ws/geocoder/v1/' + "?location=" + latitude + ',' +longitude + "&key=" + 'XVLBZ-BSU66-ULJSQ-MFGXD-TM7GZ-55F2M' + "&get_poi=1";// that.sendRequest(qqMapApi);}})},

js文件中

（1）前提是已经申请了腾讯地图的密钥，下载js放在utils文件中，在js文件中引入

var app = getApp();
// 引入SDK核心类
var QQMapWX = require('../../utils/qqmap-wx-jssdk.js');
// 实例化API核心类
var qqmapsdk;

微信小程序进行地图导航,地图展示功能相关推荐

微信小程序使用腾讯地图进行路线规划，坐标转地址，逆地理编码，计算目的地跟自身定位的距离
微信小程序使用腾讯地图 1.介绍腾讯地图官方文档: https://lbs.qq.com/ 这里,我主要运用的是这几个api ,我在运用的过程中主要实现的功能有:地图路线规划.地址转坐标+计算距离. ...
微信小程序接入腾讯地图sdk地图用户自选位置。踩坑+代码实现
采坑记录: 1.微信小程序对腾讯地图的支持好.拓展强,不建议使用其他地图 2.坐标问题** 高德地图与腾讯地图使用的是 GCJ02坐标系 3.使用微信小程序的内置方法的经纬度存在偏差.解决方案看下文 ...
腾讯小程序 java编写_微信小程序使用腾讯地图SDK详解及实现步骤
微信小程序使用腾讯地图SDK详解及实现步骤近期在做一款彩票服务类项目中用到了腾讯地图提供的小程序解决方案,拿来给大家分享一下! 使用起来非常简单,就是一些功能还有待完善. 官方文档:http:// ...
微信小程序调用腾讯地图API进行驾车路线规划
微信小程序调用腾讯地图API进行驾车路线规划申请key 下载sdk 实现代码遇到的问题申请key 微信小程序的地图api是非常有限的,所以部分功能实现需要调用地图api.使用腾讯地图api过程如 ...
微信小程序加载 FengMap地图
实现微信小程序加载FengMap地图,主要通过小程序<web-view>组件的src属性的外链方式加载,如<web-view src="https://fengmap.co ...
微信小程序之顶部导航栏（选项卡）实例 —— 微信小程序实战系列（1）
需求:顶部导航栏效果图: wxml:  <view class="navbar"><text wx:for="{{na ...
微信小程序标题栏和导航栏的设置 —— 微信小程序教程系列（7）
设置标题栏标题栏window 在app.json文件里面,通过window对象里面的属性进行设置示例: app.json: 运行: 设置导航栏导航栏TabBar 如果我们的小程序是一个多 tab ...
微信小程序界面从右边滑出_微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧不动，右侧滑动)...
本文实例讲述了微信小程序MUI侧滑导航菜单.分享给大家供大家参考,具体如下: 实现的目标--YDUI的Popup组件点击列表图标--左侧的菜单栏显示--点击关闭按钮或者右侧的遮罩层--左侧菜单栏关闭 ...
微信小程序——沉浸式导航栏实现
微信小程序--沉浸式导航栏实现微信小程序中导航栏一般来说是默认的展示标题等等,可以做的样式改变仅仅能通过配置一些官方提供的属性来实现.除此之外小程序还提供了navigationStyle这个属性可以 ...
微信小程序-自定义底部导航
代码地址如下: http://www.demodashi.com/demo/14258.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...

微信小程序进行地图导航,地图展示功能

微信小程序进行地图导航,地图展示功能相关推荐

最新文章

热门文章