uni-app获取位置
·
一、获取当前的地理位置、速度:uni.getLocation(OBJECT)
1、申请腾讯地图的key:在https://lbs.qq.com/中注册,登录后,单击网站右上角的“控制台”,进入控制台页面
2、在manifest.json文件中配置腾讯地图
"h5": {
"sdkConfigs": {
"maps": {
"qqmap": {
"key": "你的key"
}
}
}
}
3、配合map组件定位"我的位置"
(1)map的属性
longitude(类型为Number,没有默认值,表示中心经度)
latitude(类型为Number,没有默认值,表示中心纬度)
markers(类型为Array数组,类型为数组即表示地图上可以有多个,没有默认值,表示标记点)
<template>
<view>
<map class="map" :latitude="latitude" :longitude="longitude" :markers="markers"></map>
</view>
</template>
<script>
export default{
data(){
return{
latitude:"", //纬度
longitude: "",//经度
markers:[ //标记点用于在地图上显示标记的位置
{
id: 1,
latitude: "", //纬度
longitude: "" ,//经度
iconPath: "/static/images/business_map/my.png", //图标路径
width: "30", //图标的宽
height: "30" //图标的高
}
]
}
},
onLoad() {
uni.getLocation({
type: 'gcj02', //国家测绘局坐标
success: (res) => {
console.log("当前位置的经度:",res.longitude);
console.log("当前位置的纬度:",res.latitude);
this.latitude = res.latitude
this.longitude = res.longitude
this.markers[0].latitude = this.latitude
this.markers[0].longitude = this.longitude
}
})
}
}
</script>
<style>
.map{
width: 100%;
height: 500rpx;
}
</style>
二、微信小程序获取详细地址
1、下载微信小程序JavaScript SDK
2、将sdk放入项目的static下
<template>
<view>
<map class="map" :latitude="latitude" :longitude="longitude" :markers="markers"></map>
<view>城市:{{ city }}</view>
<view>省份:{{ province }}</view>
<view>区(县):{{ district }}</view>
<view>街道:{{ street }}</view>
<view>门牌号:{{ streetNum }}</view>
<view>城市代码:{{ cityCode }}</view>
<view>地址详情:{{ address }}</view>
</view>
</template>
<script>
import QQMapWX from '../../static/js/qqmap-wx-jssdk.js'
export default{
data(){
return{
latitude:"", //纬度
longitude: "",//经度
markers:[ //标记点用于在地图上显示标记的位置
{
id:1,
latitude: "", //纬度
longitude: "" ,//经度
iconPath: "/static/images/business_map/my.png", //图标路径
width: "30", //图标的宽
height: "30", //图标的高
callout:{ //自定义标记点上方的气泡窗口
content: "", //文本内容
display: "ALWAYS", //常显示气泡
padding: 5, //文本边缘留白
borderRadius: 8, //callout边框圆角
fontSize: 14 //文字大小
}
}
],
city: "",
province: "",
district: "",
street: "",
streetNum: "",
cityCode: "",
address: ""
}
},
onLoad: () => {
qqmapsdk = new QQMapWX({
key: "X5YBZ-G4HLG-X3AQI-QHDGT-G73G3-62BF4"
})
uni.getLocation({
type: 'gcj02', //国家测绘局坐标
success: (res) => {
console.log("当前位置的经度:",res.longitude);
console.log("当前位置的纬度:",res.latitude);
this.latitude = res.latitude
this.longitude = res.longitude
this.markers[0].latitude = this.latitude
this.markers[0].longitude = this.longitude
//获取地理位置信息和附近的POI列表
qqmapsdk.reverseGeocoder({
location: {
latitude: this.latitude,
longitude: this.longitude
},
//返回成功
success: (res)=>{
console.log(res);
this.city = res.result.ad_info.city
this.province = res.result.ad_info.province
this.district = res.result.ad_info.district
this.street = res.result.address_component.street
this.streetNum = res.result.address_component.street_number
this.cityCode = res.result.ad_info.city_code
this.address = res.result.address
//将获取的城市赋值到气泡content中,在map组件中显示
this.markers[0].callout.content = this.city
},
fail:(err)=>{
console.log(err);
}
})
}
})
}
}
</script>
<style>
.map{
width: 100%;
height: 500rpx;
}
</style>
更多推荐
已为社区贡献9条内容
所有评论(0)