关于map的使用记录
具体文档见uniapp
这里写了具体详细的配置。 使用了uview组件。
<u-form-item label="选择详细地点" :border-bottom="false">
<view class="mapWrap">
<map style="width: 100%; height: 150px;" @click="chooseLocation" :latitude="latitude" :longitude="longitude"
:markers="covers">
</map>
</view>
事件函数
chooseLocation: function() {
uni.chooseLocation({
success: (res) => {
this.form.address = res.address
this.latitude = res.latitude
this.longitude = res.longitude
this.covers[1].longitude = res.longitude.toString()
this.covers[1].latitude = res.latitude.toString()
// console.log(this.longitude, this.latitude, this.address)
let reg = /.+?(省|市|自治区|自治州|县|区)/g;
let add1 =res.address
console.log(add1 + ': ', add1.match(reg));
}
})
},
reg是对定位选择的地址返回的具体地址的处理, 返回值是以数组的形式返回。
配置情况
id: 0, // 使用 marker点击事件 需要填写id
title: 'map',
latitude: '',
longitude: '',
province: "",
ciry: '',
district: '',
covers: [{
latitude: '',
longitude: '',
iconPath: '../../static/images/map/location.png'
}, {
latitude: '',
longitude: '',
iconPath: '../../static/images/map/location.png'
}],
先获取当地的经纬度 getlocation可以获取当地经纬度。
onLoad() {
// 获取经纬度
let that = this
uni.getLocation({
type: 'wgs84',
success: function(res) {
console.log(res)
// console.log(res.latitude,res.longitude)
that.covers[0].latitude = res.latitude
that.covers[0].longitude = res.longitude
that.latitude = res.latitude
that.longitude = res.longitude
}
})
},
第二种
通过外部引入的方法,来获取具体的位置 首先引入。这个方法需要指定一个经纬度来确定具体的位置。 返回值 如下 。 配置同上。先用uni.getLocation来获取经纬度。
这里是qqmap-wx-jssdk.min.js
var QQMapWX = require('../../libs/qqmap-wx-jssdk.min.js')
chooseLocation: function() {
uni.chooseLocation({
success: (res) => {
this.form.address = res.address
this.latitude = res.latitude
this.longitude = res.longitude
this.covers[1].longitude = res.longitude.toString()
this.covers[1].latitude = res.latitude.toString()
console.log(this.longitude, this.latitude, this.address)
// let reg = /.+?(省|市|自治区|自治州|县|区)/g;
// let add1 = res.address
// console.log(add1 + ': ', add1.match(reg));
var qqmapsdk;
qqmapsdk = new QQMapWX({
key: 'AIEBZ-TUH6U-O3WVJ-4NEH5-UO2R7-ECFIH'
})
qqmapsdk.reverseGeocoder({
location: {
latitude: res.latitude, //用uni.getLocation来获取经纬度
longitude: res.longitude
},
success: function(res) {
console.log(res)
this.province = res.result.address_component.province
this.city = res.result.address_component.city
this.district = res.result.address_component.district
console.log(this.province, this.city, this.district)
}
})
}
})
},