uniapp开发小程序map上添加搜索框

用到的组件：map，input，cover-image，cover-view

组件说明：map组件是通过原生控件实现，原生组件层级高于前端组件,需要用到cover-view,cover-image能正常覆盖原生组件

实例：

<template>
	<view class="aqm-map-wrap">
		<map id="aqm-map" class="map"   style="width: 100%;height: 100%;"     
          :scale="17" :circles="circles"
				:markers="covers" :latitude="latitude" :longitude="longitude" 
                  @markertap="onMarkerClick">
				<cover-view class="search-con">
					<cover-view class="input c-flex c-flex-row c-item-center" >
						<cover-image class="search-icon" 
                             src="../../../static/images/notice/find-icon.png" 
                             @tap="tapInput"> 
                        </cover-image>
						<input placeholder="请输入姓名" confirm-type="search" 
                           :focus="inputFocus" @blur="onInputBlur"
						   placeholder-style="font-size: 12px;color: #8B959F;" 
                            @input="onSearch" @confirm="onInputBlur"/>
					</cover-view>
				</cover-view>	
				
		</map>
			
	</view>
</template>

<script>
	export default{
		data(){
			return {
				covers:[],
				latitude:'',
				longitude:'',
				circles:[],
				list:[],
				inputFocus:false,
				
			}
		},
		onLoad() {
			this.initData()
			
		},
		methods:{
			//初始化数据
			initData(){
				
			},
			
			//输入框触发焦点
			tapInput(e){
				this.inputFocus = true;
			},
			//输入框失去焦点
			onInputBlur(){
				this.inputFocus = false;
			},
			//搜索
			onSearch(e){
				const searchStr = e.detail.value;
				console.log('打印输入内容',searchStr)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.aqm-map-wrap{
		width:100%;height:100%;
		.search-con{
			position:absolute;top:18px;left:18px;right:18px;padding:8px 11px;
			height: 40px; line-height:40px;background: #FFFFFF;border-radius: 10px;
			.search-icon{width:25px;height:25px;margin-right:5px;}
			.input{height: 40px;padding: 0px 11px;}
		}
	}
</style>

案例解析：input的层级比较低，无法捕捉用户输入事件，要想实现输入框输入，需要给cover-view加点击事件(我这里给搜索icon加的点击事件)，然后给输入框绑定focus变量inputFocus，这样就能激活输入框的状态