uniapp nvue map组件

注意：

尽可能在调用api的时候不要使用箭头函数，
会造成this指向问题 拿不到数据
关键:控制台也不会报错

uni.getLocation 实时定位功能

1. uni.getLocation开启实时定位功能
2. 配合 markers 显示控件 （当前位置和地址）
3. 注意：uniapp中markers 数据赋值修改 必须 把markers数据都重新修改

设置地图宽高

//原生方法
const mapSearch = weex.requireModule('mapSearch')

<map 
class="mapStyle"   // 样式  nuve 只支持 .css 样式选择器
:style="`width:${windowWidth}px; height: ${windowHeight}px;`"    //  uni.getSystemInfo
id="mapStyleId" 
:latitude="latitude" 
:longitude="longitude" 
:markers="markers"  // 控件显示1.定位，2.气泡显示
@regionchange="regionchangeFn"  // 拖动地图 获中心经纬度 反解析获取地址
</map>
// 获取屏幕宽高，设置地图
uni.getSystemInfo({
	success: function(res) {
		that.windowWidth = res.windowWidth
		that.windowHeight = res.windowHeight
		that.screenHeight = res.windowHeight
	}
})

markers 设置地图控件ioc 和气泡

	uni.getLocation({
		type: 'wgs84',
		geocode: true,
		success: function (res) {
		that.latitude=res.latitude
		that.longitude=res.longitude
		that.selectTree = res.address.city.replace(/\市/, '')
		that.markers = [{
				id: 121, 	// id作为控件的唯一标识，用于修改拖动地图或者修改地址的时候 更改控件
				latitude: res.longitude, //经纬度
				longitude: res.longitude,
				iconPath: '../../static/images/ic_position.png',  //控件图标，可修改 
				width: 25, // 控件图标大小 
				height: 40,
				callout:{   // 控件气泡展示内容
					content: `${res.address.street}${res.address.streetNum}${res.address.poiName}`,
					color: '#333848',
					borderRadius: 5,
					padding: 10,
					display:'ALWAYS',
				}
		}]
	},
	//最好加上 真机调试的时候返回错误信息 便于调试
	fail: function (err) {  },    
	complete: function (err) {  }    
})

@regionchangeFn 拖动地图 从新定位 获取地址

1.@regionchangeFn 拖动函数 返回开始和结尾两个参数
2.配合mapContext .getCenterLocation 获取中心点经纬度
3.配合mapSearch.reverseGeocode 反解析地址 修改控件

			// 两个参数 移动前后 start 和 end
			regionchangeFn (e) {
				if(e.type =='end'){
					this.getCenterLanLat()
				}
			},
			getCenterLanLat() {
				let that = this
				let mapContext = uni.createMapContext("mapStyleId", this);
				mapContext.getCenterLocation({
					type: 'wgs84',
					success: (res) => {
						mapContext.translateMarker({
							markerId:121,  
							destination:{longitude:res.longitude,latitude:res.latitude},
							duration: 1000,
						})  
						let point = {latitude:res.latitude, longitude:res.longitude}
						mapSearch.reverseGeocode({point}, function (res) {
							let i = res.address.indexOf('市')
							let addressName = res.address.substr(i+1)
							that.covers = [{
								id: 121,
								latitude: point.longitude,
								longitude: point.longitude,
								iconPath: '../../static/images/ic_position.png',
								width: 25,
								height: 40,
								callout:{
								   content: addressName,
								   color: '#333848',
								   borderRadius: 5,
								   padding: 10,
								   display:'ALWAYS',
								}
							}]
						})
						
					}
				})
			},

mapSearch.poiSearchNearBy 周边搜索功能

<input 
class="addres_input" 
v-model="addresInput" 
@input="searchAddressFn" 
confirm-type="search" 
placeholder-style="#AEB1BB" 
placeholder="如：郑汴路东明路" 
/>
			searchAddressFn (e) {
				this.isMapList = true
				this.isfadeInfo = true
				let option = {
					point: {
						latitude: this.latitude,
						longitude: this.longitude,
					},
					key: e.detail.value,  // 搜索关键字
					radius: 3000  // 搜索范围 3公里
				}
				mapSearch.poiSearchNearBy(option, (res)=>{
					console.log(res.poiList)
					if(res.poiList && res.poiList.length>0){
						this.addressList = res.poiList
					}
				})
			}