微信小程序map组件,点击图标回到当前位置并放大地图

<view class="page-section page-section-gap">
					<map id="map" ref="map" style="width: 100%; height: 100vh;" :latitude="latitude"
						:longitude="longitude" :markers="covers" @markertap="markerTab" :enable-poi="true"
						subkey='7SQBZ-3GDCI-RTUGE-5FOI7-B7GEV-I4FSB' layer-style='4' :show-location="true"
						:scale="scale" min-scale="8">
<cover-image src="../../static/image/index/position_icon.png"
				style="width: 60rpx;height: 60rpx;position: absolute;right: 40rpx;top: -100rpx;" @click="clickcontrol">
			</cover-image>
					</map>
				</view>
onShow() {
			let _this = this
			// 定时检测缩放等级是否改变  
			_this.intervalId = setInterval(() => {
				// 以下代码用来获取地图的缩放等级  
				uni.createMapContext("map", this).getScale({
					success: (res) => {
						// console.log(res);
						if (_this.scale != res) {
							_this.scale = res;
							// 模拟触发缩放等级改变的事件  
							// _this.onScaleChange(res);
						}
					}
				})
			}, 500);
		},
		onHide() {
			// 停止检测  
			if (this.intervalId) {
				clearInterval(this.intervalId);
				this.intervalId = null;
			}
		},
method:{
clickcontrol(e) {
				this.scale = 18
				uni.createMapContext("map", this).moveToLocation({
					latitude: this.latitude,
					longitude: this.longitude
				})
			},
}

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值