微信小程序map组件拖拽地图中心点固定

微信小程序map组件拖拽地图中心点固定

下载微信小程序JavaScriptSDK，微信小程序JavaScriptSDK v1.2

原生组件

<map id="map4select" :style="{height: mapHeight+'px' , width: mapWidth +'px'}" :latitude="latitude" :longitude="longitude"
 scale="14" show-location :markers="covers" @tap="mapTap" @regionchange="regionchange"></map>

引入SDK核心类

var QQMapWX = require('../../libs/qqmap-wx-jssdk.js');
var qqmapsdk;
Page({
 
    onLoad: function () {
        // 实例化API核心类
        qqmapsdk = new QQMapWX({
            key: '申请的key'
        });
    },
    onShow: function () {
        // 调用接口
        qqmapsdk.search({
            keyword: '酒店',
            success: function (res) {
                console.log(res);
            },
            fail: function (res) {
                console.log(res);
            },
        complete: function (res) {
            console.log(res);
        }
    });
 
 
})

获取当前位置

uni.getLocation({
	type: 'wgs84',
	success(res) {
		console.log(res)
		let latitudes, longitudes;
		latitudes = res.latitude;
		longitudes = res.longitude;
		_this.latitude = latitudes;
		_this.longitude = longitudes;
		_this.covers[0].longitude = longitudes;
		_this.covers[0].latitude = latitudes;
		// 地址解析
		qqmapsdk.reverseGeocoder({
			location: {
				latitude: latitudes,
				longitude: longitudes
			},
			success: function(re) {
				console.log(re);
				_this.locationAddre = re.result.formatted_addresses.recommend+'-'+re.result.address;
			}
		});
	}
})

地图变化,获取中间点

regionchange(e) {
				// 地图发生变化的时候，获取中间点，也就是用户选择的位置toFixed
				if (e.type == 'end' && (e.causedBy == 'scale' || e.causedBy == 'drag')) {
					// console.log(e)
					this.mapCtx = uni.createMapContext("map4select");
					this.mapCtx.getCenterLocation({
						type: 'gcj02',
						success: function(res) {
							// console.log(res)
							let latitudes, longitudes;
							latitudes = res.latitude;
							longitudes = res.longitude;
							_this.latitude = latitudes;
							_this.longitude = longitudes;
							_this.covers[0].longitude = longitudes;
							_this.covers[0].latitude = latitudes;
							// 地址解析
							qqmapsdk.reverseGeocoder({
								location: {
									latitude: latitudes,
									longitude: longitudes
								},
								success: function(re) {
									console.log(re);
									_this.locationAddre = re.result.formatted_addresses.recommend+'-'+re.result.address;
								}
							});
						}
					})
				}
			},

地址解析

addressResolution(latitudes,longitudes){
				qqmapsdk.reverseGeocoder({
					location: {
						latitude: latitudes,
						longitude: longitudes
					},
					success: function(re) {
						console.log(re);
						_this.locationAddre = re.result.formatted_addresses.recommend+'-'+re.result.address;
					}
				});
			},