mpvue開發微信小程式定位功能擷取城市名及code碼（原生擷取經緯度高德解析，完整代碼）

先上效果圖：

說明：用了原生的wx.getLocation 定位功能擷取經緯度，然後通過高德解析位置（可以擷取位置資訊，及附近位址，天氣等）

準備：需要下載下傳高德小程式位置元件https://lbs.amap.com/api/wx/download

配置：在建立的項目中，建立一個名為 libs 目錄，将 amap-wx.js （amap-wx.js 從相關下載下傳頁面下載下傳的 zip 檔案解壓後得到）檔案拷貝到 libs 的本地目錄下，如下圖所示。

mpvue開發微信小程式定位功能擷取城市名及code碼（原生擷取經緯度高德解析，完整代碼）

引用高德元件

mpvue開發微信小程式定位功能擷取城市名及code碼（原生擷取經緯度高德解析，完整代碼）

（下面有完整代碼包含城市錨點滾動功能）主要代碼如下：

import amapFile from'../../libs/amap-wx.js'  //記着引用



methods: {
    //定位城市
    gpsCity(){      
      var that=this;
      //調用自帶位置擷取
      wx.getLocation({
        type: 'gcj02', //傳回可以用于wx.openLocation的經緯度
        success: function (res) {
          var latitude = res.latitude//次元
          var longitude = res.longitude//經度
          that.loadCity(latitude,longitude);//調用高德
        }
      })
    },
    //把目前位置的經緯度傳給高德地圖，調用高德API擷取目前地理位置，天氣情況等信
    loadCity(latitude, longitude){
      var that=this;
      var myAmapFun = new amapFile.AMapWX({ key: that.markersData.key });

      myAmapFun.getRegeo({
        location: '' + longitude + ',' + latitude + '',//location的格式為'經度,緯度'
        success: function (data) {
          console.log(data);//全部資料
          var cityCode=data[0].regeocodeData.addressComponent.adcode//擷取城市code
          that.gpsCode=cityCode
          that.city_name=data[0].regeocodeData.addressComponent.province//擷取省份名稱

          console.log(that.gpsCode);
          console.log(that.city_name);
          
        },
        fail: function (info) {}
      });

    },
}

完整頁面代碼如下（包含錨點滾動城市清單功能部落格有篇文章介紹此功能）：

<template>
  <div class="longinPage">
    <div class="right_Letter">
      <div class="Letter_list" v-for="(item,index) in LetterCity" :key="index" @click="addClassName(index,item.letter)" :class="{active:index == thatnum}">{{item.letter}}</div>
    </div>
    
    <scroll-view class="longinPage_scroll"  :scroll-y="true" @scrolltolower="scrolltolower" @scroll="scroll" :scroll-into-view="toView" :scroll-with-animation="true">
      <div class="head_gps">
        <div class="title">定位城市</div>
        <div class="hot_city hot_citys">
          <div class="city_list" @click="toHome(city_name,gpsCode)">{{city_name}}</div>
          <div class="city_again" @click="gpsCity">重新定位</div>
        </div>
      </div>

      <div class="head_gps">
        <div class="title">熱門城市</div>
        <div class="hot_city">
          <div class="city_list" v-for="(item,index) in hotCity" :key="index" @click="toHome(item.name,item.linkageid)">{{item.name}}</div>
        </div>
      </div>
     
      <div class="Letter_city" v-for="(item,index) in LetterCity" :key="index" :id="item.letter">
        <div class="Letter_title">{{item.letter}}</div>
        <div v-for="(item2,index2) in item.childArr" :key="index2">
          <div class="Letter_province">{{item2.name}}</div>
          <div class="hot_city">
            <div class="city_list" v-for="(item3,index3) in item2.childArr" :key="index3" @click="toHome(item3.name,item3.linkageid)">{{item3.name}}</div>
            <div class="placeholder"></div>
          </div>  
        </div>
      </div>

      
      <div class="box"></div>
     
    </scroll-view>
  </div>

</template>

<script>
import LetterCity from "./LetterCity.json"
import amapFile from'../../libs/amap-wx.js'

export default {
  data () {
    return {
      LetterCity:"",
      hotCity:[],
      thatnum: 0,
      toView:'',
      city_name:"--",
      markersData:{
        latitude: '',//緯度
        longitude: '',//經度
        key: "***********************"//申請的高德地圖key（申請的web key）
      },
      gpsCode:'',
    }
  },
  onLoad:function(options){
    //标題
    wx.setNavigationBarTitle({
      title: '選擇城市'
    })
    this.LetterCity=LetterCity

    //擷取開通城市
    this.$http.post({
      url:"/apiyd/index/getOpenCityListInfo",
      data:{
        source:'2',
      }  
    })
    .then(res => {
      if(res.code==1000){
        this.hotCity=res.data
      }else{
        wx.showToast({
          title: res.message, 
          icon: 'loading', 
          duration: 2000, 
          mask: true, 
        });
      }
    })
    this.gpsCity();


  },
  methods: {
    //定位城市
    gpsCity(){      
      var that=this;
      //調用自帶位置擷取
      wx.getLocation({
        type: 'gcj02', //傳回可以用于wx.openLocation的經緯度
        success: function (res) {
          var latitude = res.latitude//次元
          var longitude = res.longitude//經度
          that.loadCity(latitude,longitude);//調用高德
        }
      })
    },
    //把目前位置的經緯度傳給高德地圖，調用高德API擷取目前地理位置，天氣情況等信
    loadCity(latitude, longitude){
      var that=this;
      var myAmapFun = new amapFile.AMapWX({ key: that.markersData.key });

      myAmapFun.getRegeo({
        location: '' + longitude + ',' + latitude + '',//location的格式為'經度,緯度'
        success: function (data) {
          console.log(data);
          var cityCode=data[0].regeocodeData.addressComponent.adcode.substring(0, 2)+"0000";
          that.gpsCode=cityCode
          that.city_name=data[0].regeocodeData.addressComponent.province

          console.log(that.gpsCode);
          console.log(that.city_name);
          
        },
        fail: function (info) {}
      });

    },


    //to首頁
    toHome(name,numID){
      wx.setStorage({
        key:'cityName',
        data:name
      })
      wx.setStorage({
        key:'cityId',
        data:numID
      })
      wx.switchTab({url: "/pages/index/main"})
    },
    //選擇字母
    addClassName: function(index,id) {
      this.Tips(id)
      this.thatnum = index;
      var that=this;
      for (let i = 0; i < that.LetterCity.length; ++i) {
        if (that.LetterCity[i].letter == id) {
          that.toView= that.LetterCity[i].letter
          break
        }
      }
    },
    //提示
    Tips(text){
      wx.showToast({
        title: text,
        icon: 'none',
        duration: 500
      });
    },
  }
}
</script>

<style scoped>
.longinPage{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 50;
  width: 100%;
  height: 100%;
  background: #F7F7F7;
  padding: 0 9% 0 3%;
  box-sizing: border-box;
  overflow: hidden;
}
.longinPage_scroll{
  width: 100%;
  height: 100%;
  padding-top: 10px;
}
.bottom_text{
  font-size: 20px;
  color: #B5B5B5;
  text-align: center;
}
.right_Letter{
  position: fixed;
  right: 10px;
  top: 80px;
  z-index: 100;
  width: 25px;
  overflow: hidden;
}
.Letter_list{
  width: 25px;
  height: 25px;
  font-size: 14px;
  color: #006A3C;
  text-align: center;
  line-height: 25px;
  margin-bottom: 5px;
}
.head_gps{
  margin-top: 10px;
}
.title{
  font-size: 14px;
  color: #333333;
  margin-bottom: 10px;
}
.city_list{
  width: 96px;
  height: 27px;
  border: 1px solid #CCCBCB;
  border-radius: 2px;
  line-height: 27px;
  text-align: center;
  margin-bottom: 10px;
  font-size: 14px;
  color: #6D6D6D;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
.hot_city{
  display: flex;
  justify-content:space-between;
  flex-wrap: wrap;
}
.hot_citys{
  justify-content: flex-start;
}
.Letter_title{
  width: 22px;
  height: 22px;
  background: #006A3C;
  border-radius: 50%;
  font-size: 14px;
  color: #FFFFFF;
  text-align: center;
  line-height: 22px;
  margin: 15px 0;
}
.Letter_province{
  font-size: 20px;
}
.placeholder {
  width: 30%;
  height: 0px;
}
.active{
  background: #006A3C;
  border-radius: 5px;
  color: #fff;
  font-size: 16px;
}
.box{
  width: 100%;
  height: 30px;
}

/*隐藏滾動條*/
.longinPage_scroll ::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}
.city_again{
  width: 96px;
  height: 27px;
  line-height: 27px;
  margin-left: 10px;
  color: #6D6D6D;
}
</style>

mpvue開發微信小程式定位功能擷取城市名及code碼（原生擷取經緯度高德解析，完整代碼）

繼續閱讀

WGS-84坐标系轉GCJ02坐标系WGS-84坐标系轉GCJ02坐标系

4G子產品的GPS定位差距過大

GPS資料類型格式 NMEA協定

微信小程式開發規範（初稿）

微信小程式實作多折疊展開酷炫菜單

從NMEA0183到GNSS定位資料擷取（一）原理篇

小程式元件傳值通訊

微信小程式雲開發入門(4)之資料庫的增删改查(查:含模糊查找)

簡單封裝一個微信小程式的ajax請求

微信小程式即時通訊(融雲sdk)

小程式自定義button元件擷取使用者資訊（使用者授權登入）

陪學讀書會——《定位》第七章：跟随者的定位

陪學讀書會——《定位》第九章：名字的威力（上）

微信小程式界面開發-底部導航欄

微信小程式之底部導航欄（一）

微信小程式快速設定底部導航欄