微信小程序開發(fā)之map地圖組件定位并手動修改位置偏差

更新時間：2019年08月17日 09:25:08 作者：貝爺粉絲團

這篇文章主要介紹了微信小程序開發(fā)之map地圖組件，定位，并手動修改位置偏差，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下

環(huán)境搭建

注冊，獲取APPID（沒有這個不能真雞調(diào)試）

下載微信web開發(fā)者工具（挺多bug，將就用）

打開微信web開發(fā)者工具，掃碼登錄，新建小程序，輸入APPID，勾選創(chuàng)建quick start項目。

工程結構

可以看到工程根目錄中有個app.js，這里可以定義全局變量，通過getApp()獲取。

項目中有了一些示例，已經(jīng)有了獲取用戶信息的方法等。

開發(fā)地圖定位，選擇位置功能

我們直接修改index頁面來做這個功能。

準備

新建imgs目錄，加入2個圖標（ic_location和ic_position），用于標記當前位置，和地圖中央位置。

ic_location ic_position

添加定位功能

修改app.js，加入定位功能，獲取當前位置。

//app.js
App({
 onLaunch: function () {
  //調(diào)用API從本地緩存中獲取數(shù)據(jù)
  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{
   //調(diào)用登錄接口
   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獲取地圖的上下文。

監(jiān)聽bindregionchange事件，地圖變化的時候可以監(jiān)聽到。

地圖的大小不要寫死，動態(tài)設置，我這里打算設置為寬高都是屏幕寬度。

controls是固定在map組件上面的。一開始我想用image替代，但是設置z-index也不能在地圖上面，畢竟不是H5開發(fā)。

邏輯代碼編寫

編輯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
  // 動態(tài)設置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
     }]
    })
   }
  })

 }
 //獲取中間點的經(jīng)緯度，并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) {
  // 地圖發(fā)生變化的時候，獲取中間點，也就是用戶選擇的位置
   if(e.type == 'end'){
     this.getLngLat()
   }
 }
 ,markertap(e) {
  console.log(e)
 }
})

展示

這樣，就OK啦，用戶可以看到自己的定位，如果覺得有偏差，可以移動地圖，把中央點放到自己認為的準確位置上。

這里寫圖片描述