VUE项目使用腾讯地图js 获取位置\方法放入VUEX全局状态管理

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

 

文章目录

• 前言 
• 腾讯地图位置服务js
• 1.引入库
• 一、vue腾讯地图位置js使用
• 二、vuex管理使用
• 总结

 

---

前言

前端定位组件https://lbs.qq.com/webApi/component/componentGuide/componentGeolocation

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、引入js

在index.html中引入

在第一条引入中填写自己的key

<!--//引入封装好的JS文件，通过调用js api的接口获取定位信息。对比前两种iframe的获取方式，优化了定位时长的体验。-->
<script type="text/javascript" src="https://apis.map.qq.com/tools/geolocation/min?key&referer=myapp"></script>
<script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp"></script>
<!--//引入封装好的JS模块，调起前端定位组件，通过封装好的接口获取位置信息，相比方式二此方式更加简单快捷-->
<script type="text/javascript" src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script>

二、使用步骤

1.代码块

代码如下（示例）：

<template>
  <div id="app">
    <div id="pos-area" >
      <p id="demo">点击下面的按钮，获得对应信息：<br /></p>
    </div>
    <div id="btn-area">
      <button @click="getCurLocation()">获取精确定位信息</button>
      <button @click="getposition()">获取粗糙定位信息</button>
      <button @click="showWatchPosition()">开始监听位置</button>
      <button @click="showClearWatch()" >停止监听位置</button>
    </div>
  </div>
</template>

在data里

 //位置的监听
      positionNum:0,
      options:{},
      geolocation:'',
      preservation:{}

在methods中  记得替换key

//初始信息
    getweizhi(){
      this.geolocation = new qq.maps.Geolocation('key','myapp');
      document.getElementById("pos-area").style.height = (document.body.clientHeight - 110) + 'px';
      this.positionNum= 0;
      this.options = {timeout: 9000};
      this.getCurLocation()
    },
    //获取精准位置
    getCurLocation(){
      this.geolocation.getLocation(this.showPosition, this.showErr, this.options)
    },
    //获取粗糙位置
    getposition(){
      this.geolocation.getLocation(this.showPosition, this.showErr)
    },
    showPosition(position) {
      this.positionNum ++;
      document.getElementById("demo").innerHTML += "序号：" + this.positionNum;
      this.preservation=JSON.stringify(position, null, 4);
      document.getElementById("demo").appendChild(document.createElement('pre')).innerHTML = this.preservation
      document.getElementById("pos-area").scrollTop = document.getElementById("pos-area").scrollHeight;
    },
    showErr() {
      this.positionNum ++;
      document.getElementById("demo").innerHTML += "序号：" + this.positionNum;
      document.getElementById("demo").appendChild(document.createElement('p')).innerHTML = "定位失败！";
      document.getElementById("pos-area").scrollTop = document.getElementById("pos-area").scrollHeight;
    },
    //时时监听位置
    showWatchPosition(){
      document.getElementById("demo").innerHTML += "开始监听位置！<br /><br />";
      this.geolocation.watchPosition(this.showPosition);
      document.getElementById("pos-area").scrollTop = document.getElementById("pos-area").scrollHeight;
    },
    //停止监听位置
     showClearWatch() {
        this.geolocation.clearWatch();
        document.getElementById("demo").innerHTML += "停止监听位置！<br /><br />";
        document.getElementById("pos-area").scrollTop = document.getElementById("pos-area").scrollHeight;
     }

在mounted中

this.getweizhi()

2.vuex管理使用

代码如下（示例）：

这部分我写在vuex的子仓库hivuex.js里          记得替换key

const state = {
  //位置的监听
  positionNum:0,
  options:{},
  geolocation:'',
  preservation:{}
}
const mutations = {
  //初始信息
  getweizhi(state, val){
    state.geolocation = new qq.maps.Geolocation('key','myapp');
    state.positionNum= 0;
    state.options = {timeout: 9000};
  },
  //获取精准位置
  getCurLocation(){
    state.geolocation.getLocation(mutations.showPosition, mutations.showErr, state.options)
  },
  //获取粗糙位置
  getposition(state){
    state.geolocation.getLocation(this.showPosition, this.showErr)
  },
  showPosition(position) {
    state.positionNum ++;
    console.log('序号：'+ state.positionNum)
    state.preservation=JSON.stringify(position, null, 4);
    console.log(state.preservation)
  },
  showErr() {
    state.positionNum ++;
    console.log('序号：'+ state.positionNum)
    console.log('定位失败！')
  },
  //时时监听位置
  showWatchPosition(){
    console.log('开始监听位置！')
    state.geolocation.watchPosition(mutations.showPosition);
  },
  //停止监听位置
  showClearWatch() {
    console.log('停止监听位置！')
    state.geolocation.clearWatch();
  }
}
const getters = {}
const actions = {}

export default {
  namespaced: true,
  state,
  mutations,
  getters,
  actions
}

在vuex的store里引入

//引入vue
import Vue from 'vue'
//引入vuex
import Vuex from 'vuex'
import hivuex from './hivuex'
// 创建仓库实例
const store = new Vuex.Store({
  //专门存储共享数据的地方
  //state状态 这里存放的是一些常量
  state: {
    
  },
  //唯一能够修改 state 数据的地方，并且只能写同步代码。
  //存放处理一些突变
  mutations: {
 
  },
  //针对现有 state 数据或者其余的 getter 数据做二次计算的数据，可以理解为仓库的计算属性
  getters: {
    //state - 当前模块的state
    //getters- 当前模块的getters
    //rootState - 根模块的state数据，根据他就可以方便的去获取到其余模块的state
    getter1 (state, getters, rootState) {

    }
  },
  //这里面可以写异步代码，如果如要修改 state 中的数据，必须通过调用 mutation 来修改
  actions: {
    //context 是一个对象，这个对象有一些属性
    //state - 当前模块的state
    //getters- 当前模块的getters
    //commit - 提交mutation的方法
    //dispath - 派发action的方法
    //rootState - 根模块的state数据，根据他就可以方便的去获取到其余模块的state
    getter1 (commit, payload) {

    }
  },
  //仓库模块的拆分
  modules: {
    hivuex:hivuex,
  }
})
// 暴露 store
export default store

 

在需要使用的组件里引入vuex

import {mapMutations} from 'vuex'

 methods: {
    ...mapMutations({
       // 将 `this.weizhi1()` 映射为 `this.$store.commit('hivuex/getweizhi')`
      weizhi1:'hivuex/getweizhi',
      weizhi2:'hivuex/getCurLocation',
    }),
  },
mounted () {
    //获取位置信息
    this.weizhi1()
    this.weizhi2()
}

---

总结

提示：这里对文章进行总结：