今天來說一下怎么顯示地圖並獲取經緯度（獲取到經緯度后顯示地圖）
首先我們先創建一個項目結構如下
我們先來看一下wxml代碼
<view class="container log-list">
<map id="map" longitude="{{jd}}" latitude="{{wd}}" style="width: 100%; height: 800rpx;" show-location></map> //mp是地圖標簽 longitude經度 latitude緯度 根據經緯度來定位地圖位置 show-location顯示帶有方向的當前定位點
//這是一個窗口<view class='wx_dialog_container'> <view class='wx-dialog'> <view class='wx-dialog-title'>{{title}}</view>//顯示標題 <view class='wx-dialog-content'>{{content}}</view>//顯示內容 </view></view> <button bindtap='location' type='primary' bindtap="modalcnt">獲取經緯度</button> </view>
然后我們來看一下js代碼
// pages/lol/lol.js
Page({
/**
* 頁面的初始數據
*/
data: {
},
modalcnt: function () {
var that = this
//獲取經緯度
wx.getLocation({
type: 'gcj02',
success: function (res) {
console.log(res)
var latitude = res.latitude
var longitude = res.longitude
that.setData({
wd: latitude,
jd: longitude
})
//顯示模態窗口
wx.showModal({
title: '獲取到當前的經緯度',
content: '經度：' + longitude + '，緯度：' + latitude,
success: function (res) {
if (res.confirm) {
console.log('用戶點擊確定')
} else if (res.cancel) {
console.log('用戶點擊取消')
}
}
})
}
})
},
/**
* 生命周期函數--監聽頁面加載
*/
onLoad: function (options) {
},
/**
* 生命周期函數--監聽頁面初次渲染完成
*/
/**
* 生命周期函數--監聽頁面顯示
*/
onShow: function () {
},
/**
* 生命周期函數--監聽頁面隱藏
*/
onHide: function () {
},
/**
* 生命周期函數--監聽頁面卸載
*/
onUnload: function () {
},
/**
* 頁面相關事件處理函數--監聽用戶下拉動作
*/
onPullDownRefresh: function () {
},
/**
* 頁面上拉觸底事件的處理函數
*/
onReachBottom: function () {
},
/**
* 用戶點擊右上角分享
*/
onShareAppMessage: function () {
}
})
來看下效果
