vue项目中引入vue-html5plus进行定位

最新推荐文章于 2024-08-08 08:33:45 发布

甜菜，是我鸭！

最新推荐文章于 2024-08-08 08:33:45 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： arcgis api for js

本文链接：https://blog.youkuaiyun.com/baicai_123/article/details/119825350

arcgis api for js 专栏收录该内容

17 篇文章

订阅专栏

这篇博客介绍了如何在Vue项目中安装并使用vue-awesome-mui和vue-html5plus这两个库，以实现移动端扩展API的功能。首先，通过npm安装两个依赖。接着，在全局范围引入并使用它们。然后，在组件的created钩子中检查plus对象，确保plusready事件触发时执行定位操作。当plusready时，调用plus.geolocation.getCurrentPosition获取位置信息。博客主要关注Vue与移动端原生功能的结合应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、安装（PS：在网上查资料的时候，好多都是只安装下边的任意一个。同样的代码发现，两个同时安装，plus调用的时候才不会报undefined）

注意：在浏览器不能查看，需要在真机上

npm i vue-awesome-mui --save
npm i vue-html5plus  --save

2、全局引用

import Mui from 'vue-awesome-mui';
Vue.config.productionTip = false
Vue.use(Mui);

import VueHtml5Plus from 'vue-html5plus';
Vue.use(VueHtml5Plus);

3、使用

3-1、在create中加载调用

created() {
    // 扩展API是否准备好，如果没有则监听“plusready"事件
    if (window.plus) {
      this.plusReady()
    } else {
      document.addEventListener('plusready', this.plusReady, false)
    }
  },

3-2、方法

// 扩展API准备完成后要执行的操作
    plusReady() {
      const self = this
      console.log("plusReady--", plus.geolocation);
      plus.geolocation.getCurrentPosition(
        function (p) {
          console.log("onPlusReady--p.coords", p.coords);
          self.positionXY = p.coords;
          self.$store.state.location = p.coords;
        },
        function (err) {
          console.log("onPlusReady--err", err);
        }
      );

    },