uniapp地图组件(map)使用与遇到的一些问题总结_javascript技巧_

前言

这段时间在开发uniapp的时候使用到map组件 

总结一下本次在uniapp中使用map遇到的一些问题

文章分别是基础 定位图标  获取自身经纬度 通过经纬度获取当时城市信息

首先先看成品

废话不多说，直接开始。

首先引入map组件 

 得到的样式是这样

这里只给了两个回调 有更多需求可以去uniapp中搜索 map | uni-app官网

定位图标

 查了一下官方文档，发现官方文档中并没有关于定位的写法 ，没办法只能自己手写一个了。

大概是这样的。

获取自身经纬度

进入页面拿到用户自身的经纬度

在onShow中输入

onShow() { uni.getLocation({ geocode:true, type: 'wgs84', success: (res) => { console.log(res,'获取当前位置') }, address:(res) =>{ console.log('address',res) } });

需要打开manifest.json

 如果从来没配置过appld请先配置在进行操作

然后重新编译就会出现

允许之后就可以拿到经纬度信息

 然后可以将经纬度信息赋值给data中的latitude longitude

 onShow() { uni.getLocation({ geocode:true, type: 'wgs84', success: (res) => { console.log(res,'获取当前位置') this.longitude =res.longitude this.latitude = res.latitude }, address:(res) =>{ console.log('address',res) } }); },

通过经纬度 获取当前城市信息

首先需要进入腾讯位置服务 /控制台/应用管理/我的应用/添加key选择webServiceApi

 然后去小程序开发管理/开发设置/服务器域名/request合法域名后面新增

https://apis.map.qq.com;

 然后下载 

https://mapapi.qq.com/web/miniprogram/JSSDK/qqmap-wx-jssdk1.1.zip

 引入提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！