小程序定位地圖開發實例分析

這篇“小程序定位地圖開發實例分析”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“小程序定位地圖開發實例分析”文章吧。

1.定位系統使用場景及概述

如美團外賣小程序

點定位

點搜索

顯而易見，隨便一個電商小程序都需要用到定位服務，那么今天我們做一個類似的定位模塊
定位模塊總覽
外部頁面

內部頁面（下文說的內外部頁面就是指這兩個）

好了接下來我們開始動手

2.定位外部模塊樣式

效果

代碼

//wxml
<view bindtap="getlocation" class="location">
 <image src="../../img/location.png"></image>
 <view>{{location}}</view>
</view>
//wxss
.location{
 font-size: 17px;
 width: 100%;
 background:rgb(196, 228, 123);
 display: flex;
 /* 對于兩個塊元素 */
 /* 垂直居中 */
 align-items: center;
 /* 水平居中 */
 justify-content: center;
}
.location image{
 width: 23px;
 height: 23px;
}

先不用管上面的{{location}}，它是我們之后要從全局變量傳過來的位置信息，定位符號是用image圖片放進去的，我們用flex布局讓圖片和文字在同一行居中顯示（見注釋）

3.定位模塊內部樣式

效果

代碼（分五個小模塊，見注釋）

//wxml
//搜索模塊
<view class="header">
 <view class="search">
<image src="../../img/sousuo.png"></image>
 </view>
 <view class="input">
<input type="text" placeholder=" 請輸入你想要的內容" placeholder-class="placeholder" bindinput="bindinput" bindfocus="bindfocus" auto-focus="{{autofocus}}"></input>
 </view>
</view>
//定位模塊
<view class="dw">
<button size="mini" bindtap="getcity">
 <image src='../../img/location.png'></image>
 <text>定位</text>
 </button>
</view>
//當前位置模塊
<view >當前所在位置</view>
<button size="mini" bindtap="nowcity" class='nowcity'>{{city}}</button>
//熱門城市模塊
<view class="hotcity">熱門城市</view>
<view wx:for="{{hotcity}}" wx:key='index' class="hotcity1">
 <!-- 用了view循環之后要把view設置為inline元素，不然5個view會分成5行顯示 -->
<button size="mini" bindtap="hotcity" data-hotcityindex='{{index}}'>{{item.cityname}}</button>
</view>
//地圖模塊
<view class="map">
<map longitude="{{longitude}}" latitude="{{latitude}}" scale="14"></map>
</view>

由于我的搜索框是用了自定義組件里面的搜索組件，我是在組件的基礎上改出來的，原組件是這樣的

我們需要把搜索圖標隱藏，我們直接設置它的透明度為0，然后把我們的定位文字跟圖標通過定位直接定位到搜索框的左邊，所以樣式的代碼如下（代碼太多不好找的話可以ctrl+f直接搜索）

//wxss
.dw{
 color:rgb(0, 0, 0);
 position: absolute;
 top: 14px;
 left: -2px;
}
.dw button{
 background: white;
 padding-right: 0;
 display: flex;
 align-items: center;
 font-weight: 600 !important;
}
.nowcity{
 font-weight: normal;
}
.dw image{
 width: 23px;
 height: 23px;
}
page{
 padding: 10px;
}
.hotcity1 button{
 margin: 10px;
 margin-bottom: 0;
 font-weight: 500 !important;
  border-radius: 10px !important;
}
.hotcity{
 margin-top: 6px;
 
}
.map_container{
 position: absolute;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
}
.header{
 display: flex;
}
.search{
flex:1;
height: 40px;
text-align: center;
background: #fff;
}
.input{
 flex:9;
 height: 40px;
 background: #fff;
}
.input input{
 background: #f1f1f1;
height: 30px;
margin-top: 5px;
margin-bottom: 5px;
margin-right: 8px;
border-radius: 10px;
}
.search image{
 width: 70%;
 height: 25px;
 padding-top: 9px;
 padding-left: 5px;
}
.placeholder{
 font-size: 14px;
}
.search image{
 opacity: 0;
}
.input{
 flex:4;
}
.input input{
position: relative;
right: 0px;
}
.hotcity1{
 display: inline;
}
.map{
 position: relative;
}
map{
 border:5px solid green;
 text-align: center;
 margin: 10px auto;
position: relative;
right: 10px;
 width: 90%;
 height: 150px;
}

然后我們的搜索里面點擊搜索還會跳轉到新的搜索頁面，效果如下

這里我們可以直接復用上面的搜索組件，樣式代碼就不再貼出來了，這個模塊要將搜索自動匹配的地點名稱用循環的方式顯示出來，代碼如下

//wxml
<import src="../templates/search/search" />
<template is="search"></template>
<view bindtouchstart="bindsearch" data-keywords="{{i.name}}"
 class="text_box" wx:for="{{tips}}" wx:for-item="i" wx:key='index'>
 {{i.name}}
</view>

//wxss
@import '../templates/search/search.wxss';
.text_box{
 margin: 10px 25px;
 border-bottom:1px solid #c3c3c3;
 padding-bottom:10px
}

4.外部跳轉

當我們點擊外部的位置信息，就跳轉到內部的定位模塊，剛剛我們在上面給外部的標簽設置了觸摸事件getlocation，接下來只要到js里面設置點擊跳轉（navigateto）就可以了，但由于我們的位置信息是用全局變量賦值的，所以我們要在app.js設置一個全局變量，代碼如下

//app.js
app({
 globaldata: {
  city:'暫未定位',
  userinfo:'無'
 },
 )}

//外部js
// 引入app.js
const app=getapp()
const appg=app.globaldata
 data: {
//這里要初始化location，并將全局變量賦值給它
aboutlist:'',
location:appg.city
 },
 page({
 //定義觸摸事件
 getlocation(){
 wx.navigateto({
 //跳轉到內部定位頁面
  url: '../location/location',
 }) 
},
)}

5.點擊定位

做這個功能之前我們需要先考慮用什么地圖接口，常用的有百度地圖，騰訊地圖，高德地圖，本文選用高德地圖接口作為演示，搜索https://lbs.amap.com/，注冊，進入控制臺，創建新應用,

再添加key

這個key就像我們小程序調用接口時的驗證碼，有了它我們才能從高德調取位置的數據,然后我們點擊key后面的設置，再點擊微信小程序sdk

進去之后點這兩個，下載amap-wx.js 文件，然后在你的小程序目錄里面創建一個libs文件，把這個amap-wx.js扔進去

接下來我們來到內部定位頁面的js文件，因為這里要對全局變量進行修改來達到修改頁面數據的效果，所以也要引入app.js，并把全局變量初始化到data里面，除此之外我們要引入高德的文件來實現高德接口的調用,在data里面我們這里順便把等會要用到的熱門城市等數據一并初始化了

const app=getapp()
const appg=app.globaldata
//key里面填高德控制臺里面給你的key
const myamapfun = new amapfile.amapwx({key:'xxxxxxxxxx'});
 data: {
city:appg.city,
hotcity:[
 {'cityname':'北京市',longitude:'116.395645038',latitude:'39.9299857781'},
 {'cityname':'上海市',longitude:'121.487899486',latitude:'31.24916171'},
 {'cityname':'廣州市',longitude:'113.307649675',latitude:'23.1200491021'},
 {'cityname':'深圳市',longitude:'114.025973657',latitude:'22.5460535462'},
 {'cityname':'武漢市',longitude:'114.316200103',latitude:'30.5810841269'},
],
tips: {},//搜索自動匹配的內容
longitude:'116.4',//經度（初始值在北京）
latitude:'39.9'//緯度（初始值在北京）
}

然后我們給定位按鈕設置點擊事件getcity，這里用到高德地圖里面的獲取地址描述數據方法，教程可以參考剛剛高德控制臺微信sdk里面的教程（下面搜索自動匹配提示的教程也一樣）

此外我們我們還要在小程序后臺給高德的接口添加域名，操作步驟為
登錄微信公眾平臺，“設置“–>"開發設置"設置request合法域名，將https://restapi.amap.com 中添加進去，這樣我們才能請求到高德的數據

代碼

getcity(){
 myamapfun.getregeo({
  success: data=>{
   // that.setdata({
   //  city:data[0].desc.slice(0,2)
   // })
   appg.city=data[0].desc
   wx.getlocation({
    success:res=>{
this.setdata({
  latitude:res.latitude,
  longitude:res.longitude
})
wx.setstoragesync('city', appg.city)
wx.setstoragesync('latitude', res.latitude)
wx.setstoragesync('longitude', res.longitude)
    }
   })
  },
  fail: function(info){
   //失敗回調
   console.log(info)
  }
 })
},

getregeo方法的成功回調函數里的參數包含了定位后的位置信息(可以自己輸出一下），我們把它賦值給全局變量，然后再用setdata再次把全局變量appg.city賦值給data里面的city（因為appg.city已經改變了，要重新賦值頁面才會更新），除此之外我們還要把獲取到的位置信息同步緩存起來，下次進入頁面的時候在onload里面先判斷有沒有緩存的數據，如果有就直接使用緩存的數據，沒有就用默認值，代碼如下

onload: function (options) {
  // 進頁面先看有無緩存數據，如果沒有再讀默認值,onload里面可以取到this.data
  const latitude=wx.getstoragesync('latitude')
  const longitude=wx.getstoragesync('longitude')
  const city=wx.getstoragesync('city')
  //用了三目運算符，不習慣也可以使用if
  latitude&&longitude&&city?
  this.setdata({
   latitude:latitude,
   longitude:longitude
  }):false
 },

6.未定位時彈出定位框

給當前位置標簽添加點擊事件，判斷當位置信息為初始值暫未定位時，彈出是否定位的選擇框，當用戶點擊確定時，執行一次getcity函數即可，效果如下

代碼

nowcity(){
 if(this.data.city!='暫未定位'){
  wx.switchtab({
   url: '../about/about',
  })
 }else{
  wx.showmodal({
   title: '暫未定位',
   content: '現在要進行定位嗎',
   success: (res)=>{
    if (res.confirm) {
     this.getcity()
    } else if (res.cancel) {
     return false
    }
   }
  })
 }
},

7.熱門城市點擊跳轉，更新數據

當我們點擊熱門城市里面的按鈕時，跳轉到外部頁面，并且把對應熱門城市名稱更新到全局的city來傳到外部頁面顯示，同時還要更新全局中的經緯度數據，對于經緯度只要更新緩存即可，下一次進入內部定位頁面時再判斷緩存中有無定位數據，如果有就直接用，city數據是更新+緩存，代碼如下

hotcity(e){
 const index=e.currenttarget.dataset.hotcityindex
 //更新
 appg.city=this.data.hotcity[index].cityname
 //緩存
  wx.setstoragesync('city', appg.city)
 wx.setstoragesync('latitude', this.data.hotcity[index].latitude)
 wx.setstoragesync('longitude', this.data.hotcity[index].longitude)
 //跳轉
wx.relaunch({
 url: '../about/about',
 success:()=>{
  // 不要把數據的更新寫在這里，要在跳轉之前就寫好，因為這個回調函數是在跳轉的頁面所有函數
  // 執行完之后才執行的，會導致數據兩次跳轉次才更新
 }
})
},

上述代碼中注意要在熱門城市的循環標簽用data-hotcityindex="{{index}}"把下標傳到js中，再在js中用e.currenttarget.dataset.hotcityindex去取出來用，這個下標用來對應熱門城市數組的每一個對象，這樣我們就可以用this.data.hotcity[index].cityname來獲取被點擊的城市的名稱，再把它更新到appg.city中，注意跳轉的時候不能用wx.switchtab,因為從外部頁面進來的時候已經打開了外部頁面，那么用wx.switchtab的時候只會執行外部頁面的onshow函數，而不會執行onload,會導致頁面數據無法更新

8.搜索跳轉和輸入自動匹配地名

搜索跳轉新頁面（給內部定位頁面設置聚焦事件）

bindfocus(e){
 wx.navigateto({
  url: '../locationsearch/locationsearch',
 })
},

注意內部頁面的搜索框不是自動聚焦的，而跳轉到新的搜索頁面的搜索框是會自動聚焦的，這一點我們可以通過在搜索組件的input標簽添加auto-focus="{{autofocus}}"，再控制autofocus的值來控制是否自動聚焦，代碼如下

<template is="search" data="{{autofocus}}"></template>

注意data="{{xxx}}"是自定義組件特有的傳參方式，可以把js里面的值傳到組件中使用不過我們得先在搜索頁面的js的data中給autofocus賦值，這里順便把保存自動匹配的地名的值tips也初始化了

data: {
autofocus:true,
tips:{}
 },

接下來我們寫輸入自動匹配地名，同樣在搜索頁面的js引入全局變量和高德js文件

const amapfile = require('../../libs/amap-wx.js');
const app=getapp()
const appg=app.globaldata
const myamapfun = new amapfile.amapwx({key:'0c2c8f2007702caa7e0498d6ad072f83'});

然后我們來監聽用戶的輸入行為，設置為bindinput函數

<input type="text" placeholder=" 請輸入你想要的內容" placeholder-class="placeholder"
 bindinput="bindinput" bindfocus="bindfocus" auto-focus="{{autofocus}}"></input>

搜索頁面的js中定義bindinput

bindinput(e){
 myamapfun.getinputtips({
  // keywords為必填，不然無法獲得tips，也就不會進入success函數
  keywords:e.detail.value,
  success:data=>{
 this.setdata({
  tips:data.tips
 })
  }
 })
},

上面的getinputtips就是我們第5點中講到的微信小程序sdk中的獲取提示詞里面的方法，可以自己去看高德的教程，此處不再贅述，上面的keywords的值就是用戶輸入的內容，接口會根據這個去尋找對應匹配的地名并返回在success函數的參數中，我們只需要在成功回調函數中更新tips就可以了，那么此時假如我們輸入武漢，效果如下

那么當我們點擊自動匹配的地名的時候，需要返回到外部頁面，并且更新數據，更新緩存，思路和上面的跳轉方法是一樣的，代碼如下

bindsearch(e){
 const location=this.data.tips[e.currenttarget.dataset.searchindex]
 wx.setstoragesync('city', location.name)
 if(location.location.length!=0){
  const longitude=location.location.split(',')[0]
  const latitude=location.location.split(',')[1]
 wx.setstoragesync('latitude', latitude)
 wx.setstoragesync('longitude', longitude)
 wx.relaunch({
  url: '../about/about',
   success:()=>{
       appg.city=e.currenttarget.dataset.keywords  
  }
 })
 }else{
  wx.relaunch({
   url: '../about/about',
    success:()=>{
        appg.city=e.currenttarget.dataset.keywords  
        settimeout(()=>{wx.showtoast({
         title: '暫無經緯度數據',
        // 提示延遲時間，不能用字符串
         duration:2000,
         icon:'none'
        })
       },500);
   }
  })
 }

以上就是關于“小程序定位地圖開發實例分析”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。