mpvue小程序：高德地图实时获取地理位置

mpvue小程序：高德地图实时获取地理位置

前期准备：

1. 高德开发平台，申请key：https://lbs.amap.com/api/wx/gettingstarted

使用vuex进行全局状态管理

首先安装vuex：

 npm i vuex -S

新建 src / store / index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    cityName: '定位中..'
  },
  mutations: {
    // 实时更新地理位置
    update (state, config) {
      // 变量对象当中所有的key值，返回一个数组；然后数组遍历，此时item代表 cityName
      Object.keys(config).map((item, key) => {
        state[item] = config[item]
      })
    }
  }
})

export default store;

全局注册 vuex

在 src / main.js文件

import Vue from 'vue'
import App from './App'

// 引入store
import store from './store/index'
// 把store挂载到全局
Vue.prototype.$store = store

Vue.config.productionTip = false
App.mpType = 'app'

const app = new Vue(App)
app.$mount()

页面结构和样式

首页 index

在 app.json文件中：添加路径

"pages": [
    "pages/index/main", 
    "pages/mappage/main"
  ],

src / pages / index文件夹

结构：index.vue

样式：style.less

逻辑：main.js

.index {
  width: 100%;
  overflow: hidden;
  position: relative;
      .search {
        width: 100%;
        box-sizing: border-box;
        padding: 0 25rpx 0 10rpx;
        position: fixed;
        top: 0;
        z-index: 99;
        height: 80rpx;
        display: flex;
        align-items: center;
        background: #fff;

        div:nth-child(1) {
          width: 115rpx;
          text-align: center;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          font-size: 20rpx;
          padding-right: 15rpx;
        }

        div:nth-child(2) {
          flex: 1;
          position: relative;

          input {
            width: 100%;
            height: 56rpx;
            border-radius: 8rpx;
            background: #ededed;
            box-sizing: border-box;
            padding-left: 40rpx;
          }

          .icon {
            position: absolute;
            top: 15rpx;
            left: 10rpx;
            background: url('http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/icon-normal/search2-2fb94833aa.png') center no-repeat;
            background-size: 100%;
            width: 28rpx;
            height: 28rpx;
            margin-right: 10rpx;
          }
        }
      }
  }

import Vue from 'vue'
import App from './index'

const app = new Vue(App)
app.$mount()

地图页面 mappage

src / pages / mappage 文件夹

结构：index.vue

样式：style.less

逻辑：main.js

.mappage {
  height: 100%;
  background: #fff;
  position: relative;

  .section {
    height: 30px;
    width: 100%;

    input {
      width: 90%;
      margin: 0 auto;
      border: 1px solid #c3c3c3;
      height: 30px;
      border-radius: 3px;
      padding: 0 5px;
    }
  }

  .result {
    width: 40%;
    padding: 20rpx 0 20rpx 30rpx;
  }

  .map_container {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;

    .title {
      font-size: 34rpx;
      font-weight: bold;
      padding: 20rpx;
    }

    .map {
      width: 100%;
      height: 500rpx;
    }
  }
}

import Vue from 'vue'
import App from './index' 

const app = new Vue(App)
app.$mount()