微信小程序的map的使用

关于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是对定位选择的地址返回的具体地址的处理, 返回值是以数组的形式返回。微信小程序的map的使用_第1张图片
配置情况

                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)
							}
						})
					}
				})
			},

这里的adcode 指的是‘城市编码’ 。
微信小程序的map的使用_第2张图片

你可能感兴趣的:(工作阶段,javascript)