随笔- 4  文章- 0  评论- 0  阅读- 3466 

首先,官方文档:https://uniapp.dcloud.io/component/map.html

so,easy

但是没什么用~——~,太简单了

uni-app一般内置的使用的是腾讯地图,这个组件使用的地图也是一样的

很坑爹的是,我们看到的地图是

{功能:

带自动定位的

解析地址的

文字性质的

可以查找,筛选的

}

对你没有猜错,这些内容统统没有

但是,这些可以自己做,通过uni-app提供的接口,以及混合使用第三方的接口去实现

就比如,封装好的代码,使用高德地图的api进行逆向的地址解析

   为啥是逆向的尼?

   因为getlocation()这个函数只能获取经纬度,也就是我们一般定义的latitude和longitude

复制代码
getRegeo() {
        this.mapContext = uni.createMapContext('map');
        this.mapContext.moveToLocation(); 
                       //moveToLocation将地图中心移动到当前位置
        var that = this
        uni.showLoading({
                    title: '获取信息中'
                });
                uni.hideLoading()
                this.amapPlugin.getRegeo({
                    success: (data) => {
                        that.address.name = data[0].name;
                        console.log(data)
                    },
                    fail: (err) => {
                        console.log(err)
                    }
                });
                uni.getLocation({
                    type: 'gcj02',
                    geocode: true,
                    success(res) {
                        this.latitude = res.latitude
                        this.longitude = res.longitude
                    }
                })
            },
复制代码

上面的自动对齐一下格式哈

里面的数据部分,就直接写到return里面就好啦~

latitude的值          //切记一定要赋值,方便在后面使用marker属性

longitude的值       //同上

还有adress,你可以写成boject的形式,里面直接包含一个name就可以了

调用方便,这个地址的逆向解析就先做到这里啦~

存在的几个问题:

1、上面view部分要调用<map>,直接看官方的文档就可以了

2、使用高德地图接口的时候,要注册高德的开发者,还有文档的配置工作,这些直接百度就好,都有的

hey~还看?你总不可能什么都让我来告诉你吧,去开发吧

 

 posted on   young-zeus  阅读(2759)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」
点击右上角即可分享
微信分享提示