如果想在微信小程序中通过getLocation获取位置,显示地址详情,必须调用腾讯地图开放平台中的微信小程序JavaScript SDK地图版本,按照下面的步骤完成SDK的调用,
- 注册并登陆腾讯地图开放平台,网址https://lbs.qq.com
- 申请开发者密钥,申请地址:https://lbs.qq.com/dev/console/application/mine 添加应用时要勾选“WebServiceAPI”复选框
- 下载微信小程序JavaScript SDK,下载地址:https://mapapi.qq.com/web/miniprogram/JSSDK/qqmap-wx-jssdk1.2.zip 下载完后解压,找到qqmap-wx-jssdk1.2文件夹,将其重命名为qqmap-wx-jssdk,复制到static/js/utils文件夹下
- 设置安全域名,登录微信小程序管理后台,设置地址:https://mp.weixin.qq.com,在左侧导航栏中单击“开发”按钮,进入开发主页面,单击“开发管理”按钮,然后单击“开发设置”按钮,在此页面中找到服务器域名,在服务器域名下有request合法域名,在该域名中添加https://apis.map.qq.com
- 在代码中调用该API
使用getLocation配合map组件,可以将“我的位置”显示在地图上,代码如下:
<template>
<view>
<map class="map" :latitude="latitude" :longitude="longitude" :markers="markers">
</map>
</view>
</template>
<script>
export default{
name: "loocation",
data(){
return {
latitude:"", // 维度
longitude:"", // 经度
markers:[
{
latitude:"",
longitude:"",
iconPath:"../../static/images/my.png",
width:"30",
height:"30"
}
]
}
},
onLoad(){
uni.getLocation({
type:'gcj02',
success:(res)=>{
this.latitude = res.latitude;
this.longitude= res.longitude;
// 将获取的值赋值给markers
this.markers[0].latitude = this.latitude
this.markers[0].longitude= this.longitude
}
})
}
}
</script>
map组件的makers代表标记点用于在地图上显示标记的位置,值是一个数组类型,可以有多个标记