微信小程式開發——map地圖元件,定位,並手動修改位置偏差。
阿新 • • 發佈:2019-02-10
環境搭建
- 註冊,獲取APPID(沒有這個不能真雞除錯)
- 下載微信web開發者工具(挺多bug,將就用)
- 開啟微信web開發者工具,掃碼登入,新建小程式,輸入APPID,勾選建立quick start專案。
工程結構
可以看到工程根目錄中有個app.js,這裡可以定義全域性變數,通過getApp()獲取。
專案中有了一些示例,已經有了獲取使用者資訊的方法等。
開發地圖定位,選擇位置功能
我們直接修改index頁面來做這個功能。
準備
- 新建imgs目錄,加入2個圖示(ic_location和ic_position),用於標記當前位置,和地圖中央位置。
新增定位功能
修改app.js,加入定位功能,獲取當前位置。
//app.js
App({
onLaunch: function () {
//呼叫API從本地快取中獲取資料
var logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
}
,getUserInfo:function(cb){
var that = this
if(this.globalData.userInfo){
typeof cb == "function" && cb(this.globalData.userInfo)
}else{
//呼叫登入介面
wx.login({
success: function () {
wx.getUserInfo({
success: function (res) {
that.globalData.userInfo = res.userInfo
typeof cb == "function" && cb(that.globalData.userInfo)
}
})
}
})
}
}
//get locationInfo
,getLocationInfo: function(cb){
var that = this;
if(this.globalData.locationInfo){
cb(this.globalData.locationInfo)
}else{
wx.getLocation({
type: 'gcj02', // 預設為 wgs84 返回 gps 座標,gcj02 返回可用於 wx.openLocation 的座標
success: function(res){
that.globalData.locationInfo = res;
cb(that.globalData.locationInfo)
},
fail: function() {
// fail
},
complete: function() {
// complete
}
})
}
}
,globalData:{
userInfo:null
,locationInfo: null
}
})
地圖控制元件佈局
修改pages/index/index.wxml檔案,新增map標籤,如下
<map id="map4select"
longitude="{{longitude}}" latitude="{{latitude}}"
markers="{{markers}}"
scale="20"
style="width:{{map_width}}px;height:{{map_height}}px"
bindregionchange="regionchange"
controls="{{controls}}">
</map>
- 需要給地圖指定一個id,後面可以通過id獲取地圖的上下文。
- 監聽bindregionchange事件,地圖變化的時候可以監聽到。
- 地圖的大小不要寫死,動態設定,我這裡打算設定為寬高都是螢幕寬度。
- controls是固定在map元件上面的。一開始我想用image替代,但是設定z-index也不能在地圖上面,畢竟不是H5開發。
邏輯程式碼編寫
編輯index.js
var app = getApp()
Page({
data:{
map_width: 380
,map_height: 380
}
//show current position
,onLoad: function(){
var that = this;
// 獲取定位,並把位置標示出來
app.getLocationInfo(function(locationInfo){
console.log('map',locationInfo);
that.setData({
longitude: locationInfo.longitude
,latitude: locationInfo.latitude
,markers:[
{
id: 0
,iconPath: "../../imgs/ic_position.png"
,longitude: locationInfo.longitude
,latitude: locationInfo.latitude
,width: 30
,height: 30
}
]
})
})
//set the width and height
// 動態設定map的寬和高
wx.getSystemInfo({
success: function(res) {
console.log('getSystemInfo');
console.log(res.windowWidth);
that.setData({
map_width: res.windowWidth
,map_height: res.windowWidth
,controls: [{
id: 1,
iconPath: '../../imgs/ic_location.png',
position: {
left: res.windowWidth/2 - 8,
top: res.windowWidth/2 - 16,
width: 30,
height: 30
},
clickable: true
}]
})
}
})
}
//獲取中間點的經緯度,並mark出來
,getLngLat: function(){
var that = this;
this.mapCtx = wx.createMapContext("map4select");
this.mapCtx.getCenterLocation({
success: function(res){
that.setData({
longitude: res.longitude
,latitude: res.latitude
,markers:[
{
id: 0
,iconPath: "../../imgs/ic_position.png"
,longitude: res.longitude
,latitude: res.latitude
,width: 30
,height: 30
}
]
})
}
})
}
,regionchange(e) {
// 地圖發生變化的時候,獲取中間點,也就是使用者選擇的位置
if(e.type == 'end'){
this.getLngLat()
}
}
,markertap(e) {
console.log(e)
}
})
展示
這樣,就OK啦,使用者可以看到自己的定位,如果覺得有偏差,可以移動地圖,把中央點放到自己認為的準確位置上。