cordova+vue+webapp使用html5获取地理位置的方法

接下来我将为您讲解“cordova+vue+webapp使用html5获取地理位置的方法”的完整攻略。

1. 简介

H5的地理信息API，是HTML5新增的API之一，通过使用该API，我们可以获取到手机端、PC端等设备的地理位置信息。本文将使用Cordova+Vue框架进行H5地理信息获取的一些操作，其中，Cordova则是在构建混合APP时采用的，该方法也适合在Web应用中使用。

2. 准备工作

在使用Cordova开发前，我们需要安装好相应的环境，可参考Cordova文档，安装完成后，我们将会得到一个Cordova工程。

在框架选定上，以Vue.js为例，我们可以通过Vue CLI脚手架工具创建一个Vue工程，该工程已经搭建好了webpack打包工具等工程环境。

3. 安装cordova-plugin-geolocation插件

执行以下命令行安装cordova-plugin-geolocation插件

cordova plugin add cordova-plugin-geolocation

安装完毕后，我们需要在config.xml文件中添加以下代码，对插件进行一些设置：

<platform name="android">
    <config-file parent="/*" target="res/xml/config.xml">
        <feature name="Geolocation">
            <param name="android-package" value="org.apache.cordova.GeoBroker" />
        </feature>
    </config-file>
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
</platform>

4. H5地理信息获取

通过下面的代码，可以进行H5地理信息获取操作：

// 获取当前坐标
navigator.geolocation.getCurrentPosition(
    position => {
        console.log('当前坐标', position.coords);
    },
    error => {
        console.error('错误信息', error);
    },
    {
        enableHighAccuracy: true, // 启用高精度定位
        maximumAge: 0, // 缓存0ms，避免获取上次缓存数据
        timeout: 10000, // 超时时间10s
    }
);

上述代码中，getCurrentPosition方法可以获取当前位置，它的第一个参数为获取成功后的回调函数，第二个参数为获取失败后的回调函数，第三个参数是设置的选项。

示例1：在Vue应用中使用

<template>
  <div>
    <p>{{ locationMsg }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      locationMsg: '',
    };
  },
  methods: {
    getLocation() {
      navigator.geolocation.getCurrentPosition(
        position => {
          this.locationMsg = `当前位置坐标：${position.coords.latitude}, ${position.coords.longitude}`;
        },
        error => {
          console.error('获取当前位置失败', error);
        },
      );
    },
  },
};
</script>

示例2：在Cordova应用中使用

document.addEventListener(
    'deviceready',
    () => {
        navigator.geolocation.getCurrentPosition(
            position => {
                console.log('当前坐标', position.coords);
            },
            error => {
                console.error('错误信息', error);
            },
            {
                enableHighAccuracy: true, // 启用高精度定位
                maximumAge: 0, // 缓存0ms，避免获取上次缓存数据
                timeout: 10000, // 超时时间10s
            }
        );
    },
    false
);

5. 结语

通过以上操作，我们可以很容易地进行H5地理位置信息获取的操作，开发者可以根据自己的需要在Cordova、Vue等项目中使用。