小程序點擊地址導航功能首先必須去騰訊地圖申請賬號並開通權限
地址：https://lbs.qq.com/dev/console/home
第一步：
申請完賬號---------控制台---------應用管理-----------我的應用------------添加key。注：勾選請勿選錯
第二步：在開發者文檔中下載sdk
第三步：
小程序引入sdk（存放位置不重要）
第四步：
app.json中需要添加獲取地理位置的用途
此處僅展示測試數據。在js中定義了。動態數據需要自己調用
創建一個按鈕
<button bindtap="navigation">點擊導航</button>
// pages/map/map.js
var QQMapWX = require('../../utils/qqmap-wx-jssdk.js');
var qqmapsdk;
Page({
/**
* 頁面的初始數據
*/
data: {
},
/**
* 生命周期函數--監聽頁面加載
*/
onLoad: function (options) {
qqmapsdk = new QQMapWX({
key: '填寫剛申請的key'
});
},
navigation(){
qqmapsdk.geocoder({
address: '江西省九江市九江學院',
complete: res => {
console.log(res.result.location); //經緯度對象
this.openMap(res.result.location.lat,res.result.location.lng,'九江學院','江西省九江市九江學院')
}
})
},
openMap: function (lat,lon,name,address) {
wx.getLocation({
type: 'gcj02', //默認為 wgs84 返回 gps 坐標，gcj02 返回可用於wx.openLocation的坐標
success: function (res) {
wx.openLocation({//使用微信內置地圖查看位置。
latitude: lat,//要去的緯度-地址
longitude: lon,//要去的經度-地址
name: name,
address: address
})
}
})
},
/**
* 生命周期函數--監聽頁面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函數--監聽頁面顯示
*/
onShow: function () {
},
/**
* 生命周期函數--監聽頁面隱藏
*/
onHide: function () {
},
/**
* 生命周期函數--監聽頁面卸載
*/
onUnload: function () {
},
/**
* 頁面相關事件處理函數--監聽用戶下拉動作
*/
onPullDownRefresh: function () {
},
/**
* 頁面上拉觸底事件的處理函數
*/
onReachBottom: function () {
},
/**
* 用戶點擊右上角分享
*/
onShareAppMessage: function () {
}
})
最終效果
想要點擊去這里的話需要在手機上真機調試測試