uniapp开发app中配置高德地图定位流程

在使用uniapp开发app过程中,如何使用高德地图进行定位

高德地图开放平台账号申请

进入高德地图开放平台,注册并登陆开发者账号,完成之后点击进入控制台主页

在应用管理中点击创建新应用
QQ截图20210204110943.png
输入并选择你的应用类型,创建完应用后,添加key
QQ截图20210204111240.png

选择并输入你的应用信息

key名称可以自定义填写
服务平台选择(这里以)安卓为例
填写安全码、应用包名等信息,完成后提交
QQ截图20210204111407.png
创建完成之后拿到生成的key
QQ截图20210204111727.png

项目文件中配置高德定位

HBuliderX编辑器中,在项目根目录打开manifest.json这个文件
QQ截图20210204112141.png
APP模块配置中在定位中选择高德地图,并填入对应的key信息

填写完成之后一定要注意,打包自己app的自定义调试基座

QQ截图20210204112731.png

点击运行 =>运行到手机或模拟器 => 制作自定义调试基座
填写自己的信息,证书文件信息等,进行打包
QQ截图20210204113119.png

待自定义调试基座打包完成之后,点击运行 =>运行到手机或模拟器 =>选择自定义调试基座运行

现在,你可以用自己申请的高德定位key进行定位请求了

uni.getLocation({
    type: 'wgs84',
    success: function (res) {
        console.log('当前位置的经度:' + res.longitude);
        console.log('当前位置的纬度:' + res.latitude);
    }
});

具体定位api参数可查看uniapp获取位置文档

  • 3
    点赞
  • 23
    收藏
    觉得还不错? 一键收藏
  • 9
    评论
你可以按照以下步骤来在Uniapp使用高德地图: 1. 首先,你需要在高德开放平台上注册一个开发者账号,并创建一个应用获取API Key。 2. 在Uniapp的项目,可以使用uni-app官方提供的插件uniAmap,该插件可以方便地在Uniapp使用高德地图。 3. 在命令行执行以下命令安装uniAmap插件: ``` npm install @dcloudio/uni-uniAmap ``` 4. 在`manifest.json`文件配置uniAmap插件的路径: ```json "uniAmap": { "provider": "uniAmap", "path": "/static/js/uniAmap.js" } ``` 5. 在需要使用地图的页面,引入uniAmap插件: ```javascript import uniAmap from '@dcloudio/uni-uniAmap' uniAmap.initAMapApiLoader({ key: '你的高德API Key', plugin: ['AMap.Geolocation'] }) ``` 6. 在页面使用地图组件,例如: ```html <view> <uni-amap :longitude="longitude" :latitude="latitude" :markers="markers" :polyline="polyline" @markerTap="onMarkerTap" @controlTap="onControlTap" ></uni-amap> </view> ``` 7. 在页面的Vue实例,定义相关的数据和事件处理方法: ```javascript data() { return { longitude: 116.397128, latitude: 39.916527, markers: [{ id: 0, longitude: 116.397128, latitude: 39.916527, title: 'Marker 1' }], polyline: [] } }, methods: { onMarkerTap(e) { console.log(e) }, onControlTap(e) { console.log(e) } } ``` 这样就可以在Uniapp使用高德地图了。你可以根据自己的需求,进一步配置使用高德地图的各种功能和API。希望对你有所帮助!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值