小程序地图选位置

// 地图选位置
mapClick() {
	let _this = this;
	uni.chooseLocation({
		success: function(res) {
			console.log(res);
			// 地图key
			var mapkey = uni.getStorageSync('webConfig').web_config_str.mapkey;
			// 引入腾讯地图SDK核心类
			var QQMapWX = require('@/util/qqmap-wx-jssdk.min.js');
			var qqmapsdk = new QQMapWX({
				key: mapkey,
			});
			// 根据经纬度获取所在位置
			qqmapsdk.reverseGeocoder({
				location: {
					longitude: res.longitude,
					latitude: res.latitude,
					},
					success: function(reverseRes) {
						console.log("==根据经纬度获取所在位置==");
						console.log(reverseRes);
						_this.province = reverseRes.result.ad_info.province;
						_this.city = reverseRes.result.ad_info.city;
						_this.area = reverseRes.result.ad_info.district;
					}
				});
						
			    _this.longitude = res.longitude;
				_this.latitude = res.latitude;
				_this.address = res.name;
				_this.$forceUpdate();
			}
	});
},

### 微信小程序地图组件使用教程 微信小程序提供了 `map` 组件来支持位置地图展示功能。以下是关于如何在微信小程序中实现位置地图展示的相关说明。 #### 1. 地图组件基础配置 在 WXML 文件中,可以通过 `<map>` 标签引入地图组件,并通过一系列属性对其进行配置[^1]: ```xml <view> <map id="myMap" longitude="{{longitude}}" latitude="{{latitude}}" scale="{{scale}}" bindtap="onTap"> <!-- 可标记 --> <cover-view class="marker" data-id="0" style="left:{{pointX}}px;top:{{pointY}}px;" bindtap="markertap"></cover-view> </map> </view> ``` 其中: - `longitude` 和 `latitude` 是必填项,分别代表地图中心点的经度和纬度。 - `scale` 表示缩放级别,默认值为 16。 - `bindtap` 是绑定点击事件的方法名。 #### 2. 数据绑定与动态更新 在 JS 文件中,可以初始化数据并动态更新地图位置信息[^3]: ```javascript Page({ data: { longitude: 113.324520, latitude: 23.102290, scale: 18 }, onTap(e) { console.log('地图被点击', e); } }); ``` #### 3. 添加标记点 如果需要在地图上显示特定地点的标记点,可以在 `<map>` 中嵌套 `<cover-image>` 或者 `<cover-view>` 来创建标记点: ```xml <map id="myMap" longitude="{{longitude}}" latitude="{{latitude}}" scale="{{scale}}"> <cover-image class="marker" src="/images/marker.png" longitude="{{markerLongitude}}" latitude="{{markerLatitude}}"></cover-image> </map> ``` 对应的 JavaScript 配置如下: ```javascript Page({ data: { markerLongitude: 113.324520, markerLatitude: 23.102290 } }); ``` #### 4. 获取当前位置 为了获取用户的当前位置以便自动定位到用户所在区域,可以调用微信提供的 API 方法 `wx.getLocation()`[^4]: ```javascript wx.getLocation({ type: 'gcj02', // 返回可以用于 wx.openLocation 的经纬度 success(res) { const latitude = res.latitude; const longitude = res.longitude; this.setData({ latitude: latitude, longitude: longitude }); } }); ``` #### 5. 打开外部地图应用 当用户希望查看更详细的路线规划时,可以利用 `wx.openLocation()` 跳转至外部地图应用查看程序: ```javascript wx.openLocation({ latitude: 23.10229, longitude: 113.32452, name: '目的地名称', address: '详细地址' }); ``` --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值