学习目标:
提示:微信小程序导航功能
轻松掌握微信小程序导航,注意事项微信小程序需要使用到定位的功能!需要使用经纬度
经纬度推荐网站:地图坐标系转换 - 在线工具 (tool.lu)
学习内容:
导航:
- 使用自己key值进行导航
- 直接导航
使用key值进行导航:
提示:需要到自己的微信小程序官方申请导航的key值,一般推荐申请的是腾讯地图的导航
wxml
<!--index.wxml-->
<view bindtap="nav">微信小程序调用地图</view>
index.js
var amapFile = require('../../libs/qqmap-wx-jssdk.min');
Page({
/**
* 页面的初始数据
*/
data: {
// 是否收藏
iscollect:true,
address:"要去的位置"
},
// 导航
navigation(){
var that = this;
var qqmapsdk = new amapFile({
key: '自己申请的key'
});
let name=this.data.address
let address=this.data.address
qqmapsdk.geocoder({
address: address,
success: function(res) {
// 经度lng 纬度lat
let latitude=res.result.location.lat
let longitude=res.result.location.lng
console.log(res,'res')
wx.getLocation({//获取当前经纬度
type: 'wgs84', //返回可以用于wx.openLocation的经纬度,官方提示bug: iOS 6.3.30 type 参数不生效,只会返回 wgs84 类型的坐标信息
success: function (res) {
console.log(res,'res2')
console.log(latitude,'latitude')
console.log(longitude,'longitude')
wx.openLocation({
//使用微信内置地图查看位置。
latitude: latitude,//要去的纬度-地址
longitude: longitude,//要去的经度-地址
name: name,
address:address,
scale:18
})
}
})
},
complete: res => {
console.log(res.result.location)
}
})
},
})
app.json
"permission": {
"scope.userLocation": {
"desc": "你的位置信息将用于小程序定位的使用"
}
},
qqmap-wx-jssdk.min里面的内容记得加上!!
直接使用导航:
提示:这里需要使用精准的经纬度,记得使用匹配的
wxml
<!-- 定义nav导航方法 -->
<view bindtap="nav">
<image src="http://m.qpic.cn/psc?/V12iywoj0vjy8D/qWkkGOdvaHRbO0s2SzmJ0A6hNpVJHy5e8X9YJE5pp4uwGevHzWWheEAT7sJz7cZvbW8hMNK3SKrz4ZQ4Is.w5w!!/b&bo=IAAgAAAAAAADByI!&rf=viewer_4&t=5"></image>
<view>
<text>导航</text>
</view>
</view>
js
methods: {
nav: function () {
wx.openLocation({
latitude: 24.878803318222904, //维度
longitude: 102.82271535529003, //经度
// latitude:36.0812917700, //维度
// longitude: 114.4562530500, //经度
// name: "目的地", //目的地定位名称
scale: 15, //缩放比例
address: "昆明市呈贡区第一小学" //导航详细地址
})
}
}
以上为导航的两种方式,仅供参考!!