Uniapp获取定位与地址信息天气方案分享

需求:使用uniapp在app或者微信小程序上获取经纬度以及中文地址信息等,使用vue3+ts

A:使用官方的系统定位即uni.getLocation,type只能传wgs84

这种方案Android与微信小程序只能获取到经纬度,获取不到地址信息,以前的官方可以获取地址信息是因为之前的腾讯SDK免费

H5未测,应该是根据所使用的浏览器是否购买了地图授权来决定,如QQ、微信浏览器。

IOS都可以获取到。


B:使用第三方服务,也是uni.getLocation,type可以传gcj02

这种方案其实主要是为了让Android能够获取地址信息,只需配置好相关key等信息后,记得重新打包基座,用自己的证书以及自己的包名才会生效。

但微信小程序还是获取不到地址信息,官网有说明的。


C:使用高德的微信小程序插件 从 参考链接学习到的方案。

这种方案可以使Android与微信小程序获取到地理地址位置信息等,天气信息都能获取到。

去高德创建微信小程序的key(就算打包Android也是使用的高德平台上生成的微信小程序的key),并下载高德小程序插件,放置到项目某一个目录中(非static即可),因为是使用ts+vue3编写需要修改该插件的最后一句代码为:

// module.exports.AMapWX=AMapWX;

export default { AMapWX };


然后在使用的地方:

import { ref, computed, onMounted, onUnmounted,reactive,onBeforeMount  } from 'vue';

import amap from '../../libs/amap-wx.130.js'

    let gaodeWXConfig = reactive({

        amapPlugin: null,  

        key: '你的key',  

        addressName: '',  

        weather: {  

            data: []  

        }  

    })  

    onBeforeMount(()=>{

        gaodeWXConfig.amapPlugin = new amap.AMapWX({

            key: gaodeWXConfig.key  

        });

    })

    //获取地理位置

    function refreshLocation(){

        gaodeWXConfig.amapPlugin.getRegeo({  

            success: (data) => {  

                console.log("!!!!!!!!!getLocation",data)  

                locationText.value = data[0].desc || data[0].name;

            },

            fail: (res) => {

                console.log("!!!!!!!!!getLocation fail",res)

            }

        });  

    }

    //获取实时天气数据

    function getWeather() {

        uni.showLoading({

            title: '获取信息中'

        });

        gaodeWXConfig.amapPlugin.getWeather({

            success: (data) => {

                console.log(data);

                uni.hideLoading();

            }

        });

    }


这是这两天研究的经验分享,如有不对或方案补充欢迎提出,谢谢。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容