欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序開發(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項目。

工程結(jié)構(gòu)

可以看到工程根目錄中有個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)設(shè)置,我這里打算設(shè)置為寬高都是屏幕寬度。

controls是固定在map組件上面的。一開始我想用image替代,但是設(shè)置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)設(shè)置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啦,用戶可以看到自己的定位,如果覺得有偏差,可以移動地圖,把中央點放到自己認為的準確位置上。

這里寫圖片描述
這里寫圖片描述
這里寫圖片描述

相關(guān)文章

  • 原生JS封裝ajax 傳json,str,excel文件上傳提交表單(推薦)

    原生JS封裝ajax 傳json,str,excel文件上傳提交表單(推薦)

    這篇文章主要介紹了原生JS封裝ajax 傳json,str,excel文件上傳提交表單(推薦)的相關(guān)資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下
    2016-06-06
  • jQuery AJAX回調(diào)函數(shù)this指向問題

    jQuery AJAX回調(diào)函數(shù)this指向問題

    了解JavaScript的人都知道JavaScript的this不總是指向當前對象,函數(shù)或類中的this指向與調(diào)用這個函數(shù)的對象以及上下文環(huán)境是息息相關(guān)的。
    2010-02-02
  • js針對圖片加載失敗的處理方法分析

    js針對圖片加載失敗的處理方法分析

    這篇文章主要介紹了js針對圖片加載失敗的處理方法,結(jié)合實例形式分析了js針對圖片加載失敗時的事件監(jiān)聽、響應(yīng)等相關(guān)操作技巧,需要的朋友可以參考下
    2019-08-08
  • JS實現(xiàn)圖片瀑布流效果

    JS實現(xiàn)圖片瀑布流效果

    這篇文章主要為大家詳細介紹了JS實現(xiàn)圖片瀑布流,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-09-09
  • 微信小程序調(diào)用天氣接口并且渲染在頁面過程詳解

    微信小程序調(diào)用天氣接口并且渲染在頁面過程詳解

    這篇文章主要介紹了微信小程序調(diào)用天氣接口并且渲染在頁面過程詳解,今天寫一個具體的例子,調(diào)用一個免費的天氣接口的api,并且把所獲取的內(nèi)容展示在前端的界面,前端界面與 iView Weapp結(jié)合,需要的朋友可以參考下
    2019-06-06
  • JavaScript實現(xiàn)點擊按鈕就復(fù)制當前網(wǎng)址

    JavaScript實現(xiàn)點擊按鈕就復(fù)制當前網(wǎng)址

    在大量的網(wǎng)站都有這樣的功能,當點擊一個按鈕的時候可以復(fù)制當前頁面的地址,以此可以方便網(wǎng)站用戶對鏈接的存儲,同時也便于網(wǎng)站的推廣,下面給大家分享具體實現(xiàn)代碼,對js實現(xiàn)點擊按鈕就復(fù)制的相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧
    2015-12-12
  • 談?wù)凧S中的!!

    談?wù)凧S中的!!

    !!一般用來將后面的表達式強制轉(zhuǎn)換為布爾類型的數(shù)據(jù)(boolean),也就是只能是true或者false。下面看看通過本文給大家介紹了JS中的!!,需要的朋友參考下吧
    2017-12-12
  • JavaScript中Array功能方法詳解

    JavaScript中Array功能方法詳解

    Array?對象是前端開發(fā)中使用頻率最高的數(shù)據(jù)結(jié)構(gòu)之一,今天我們來復(fù)習(xí)一下它的幾種操作方法,find(),some()和filter(),通過代碼示例介紹的非常詳細,需要的朋友可以參考下
    2023-08-08
  • bootstrap-table formatter 使用vue組件的方法

    bootstrap-table formatter 使用vue組件的方法

    Bootstrap table是國人開發(fā)的一款基于 Bootstrap 的 jQuery 表格插件,通過簡單的設(shè)置,就可以擁有強大的單選、多選、排序、分頁,以及編輯、導(dǎo)出、過濾(擴展)等等的功能。這篇文章重點給大家介紹bootstrap-table formatter 使用vue組件的方法,感興趣的朋友一起看看
    2019-05-05
  • javascript實現(xiàn)在網(wǎng)頁中運行本地程序的方法

    javascript實現(xiàn)在網(wǎng)頁中運行本地程序的方法

    這篇文章主要介紹了javascript實現(xiàn)在網(wǎng)頁中運行本地程序的方法,實例分析了JavaScript基于ActiveXObject運行本地程序的技巧,需要的朋友可以參考下
    2016-02-02

最新評論