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

Myth丶恋晨 2023-02-20 12:30 36阅读 0赞

## 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

<template>
      <div class="index">
        
        <div class="search">
          <div @click="toMappage">{
       {cityName}}</div>
          <div @click="toSearch">
            <input type="text" placeholder="搜索商品" />
            <span class="icon"></span>
          </div>
        </div>
      </div>
    </template>
    
    <script type="text/javascript">
    // 引入高德地图文件
    import amapFile from "../../utils/amap-wx.js";
    
    // 使用Vuex里面的 mapState
    import { mapState, mapMutations } from "vuex";
    
    export default {
      data() {
        return {};
      },
      components: {},
      // 计算属性
      computed: {
        ...mapState(["cityName"])
      },
      // 放置接口请求的方法
      mounted() {
        this.getCityName();
      },
      methods: {
        ...mapMutations(['update']),
        getCityName() {
          let _this = this;
          var myAmapFun = new amapFile.AMapWX({
            key: "310c4b8a84047b568ca1ef7f57f60231"
          });
          myAmapFun.getRegeo({
            success: function(data) {
              // 成功回调
              console.log(data);
              // ........
            },
            fail: function(info) {
              // 失败回调
              console.log(info);
              // _this.cityName = '北京'
              _this.update({ cityName: "北京" });
            }
          });
        },
        toMappage() {
          // 通过 wx.getSetting 先查询一下用户是否授权 “scoped.record”
          let _this = this;
          wx.getSetting({
            success: res => {
              // 如果没有同意授权，打开设置
              // console.log(res)
              if (!res.authSetting["scope.userLocation"]) {
                wx.openSetting({
                  success: res => {
                    // 获取授权位置信息
                    _this.getCityName();
                  }
                });
              } else {
                wx.navigateTo({
                  url: "/pages/mappage/main"
                });
                // _this.getCityName()
              }
            },
            fail: err => {
              console.log(err);
            },
            complete: () => {}
          });
        }
      }
    };
    </script>
    
    <style lang="less" scoped>
    @import "./style.less";
    </style>

.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

<template>
      <div class="mappage">
        <div class="section">
          <input type="text" placeholder="搜索" focus="true" v-model="keywords" @input="bindInput">
        </div>
        <scroll-view :scroll-y="true" class="addcont" style="height: 500rpx;">
          <div class="result" @touchstart="bindSearch(item.name)" v-for="(item, index) in tips" :key="index">
            {
       {item.name}}
          </div>
        </scroll-view>
    
        <div class="map_container">
          <div class="title">显示当前位置:</div>
          <map class="map" id="map" scale="16" :longitude="longitude" :latitude="latitude" :markers="markers"></map>
        </div>
      </div>
    </template>
    
    <script>
    // 引入高德地图API
    import amapFile from '../../utils/amap-wx'
    import { mapMutations } from 'vuex'
    export default {
      data () {
        return {
          // 地图
          tips: [],
          longitude: 0,
          latitude: 0,
          markers: [],
          // 搜索关键词
          keywords: ''
        }
      },
      mounted() {
        // 获取地理位置
        this.getMapaddress()
      },
      methods: {
        ...mapMutations(['update']),
        getMapaddress () {
          let _this = this
          var myAmapFun = new amapFile.AMapWX({key:'310c4b8a84047b568ca1ef7f57f60231'})
          myAmapFun.getRegeo({
            iconPath: "/static/images/marker.png",
            iconWidth: 22,
            iconHeight: 32,
            success(data) {
              console.log(data)
              let marker = [
                {
                  id: data[0].id,
                  latitude: data[0].latitude,
                  longitude: data[0].longitude,
                  width: data[0].width,
                  height: data[0].height
                }
              ]
              _this.markers = marker
              _this.longitude = data[0].longitude
              _this.latitude = data[0].latitude
            },
            fail (info) {
              console.log(info)
            }
          })
        },
        bindInput(e) {
          // console.log(e)
          let _this = this
          let keywords = _this.keywords
          // 创建高德地图
          var myAmapFun = new amapFile.AMapWX({key:'310c4b8a84047b568ca1ef7f57f60231'})
          // 调用高德地图搜索补全方法：getInputtips
          myAmapFun.getInputtips({
            keywords: keywords,
            location: '',
            success: function(data) {
              // console.log(data)
              if (data && data.tips) {
                _this.tips = data.tips
              }
            }
          })
        },
        // 点击搜索内容的子项
        bindSearch (cityName) {
          this.update({cityName: cityName})
          wx.navigateBack({
            delta: 1
          });
        }
      }
    }
    </script>
    
    <style lang="less" scoped>
    @import "./style.less";
    </style>

.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()