• uniapp 请求附近地址列表


    <template>
    	<view class="content">
    		
    			 <map 
    				:latitude="latitude"
    				:longitude="longitude"
    				style=" 100%; height: 40vh"
    				scale="15" 
    				:show-location="true"			
    				@updated="mapUpdated"
    				>
    			</map>			
    			<view class="section">
    			  <input @confirm="bindInput" @input="bindInput" placeholder="输入地址搜索" focus="true" />
    			</view>
    			<view style="height: 50vh;overflow-y: scroll;" class="">				
    				<view @click="choose(index)"  class="plr20" v-for="(item,index) in tips" :key="index">
    					<view class="fs30 C333 mt30">
    						{{index+1}}.{{item.name}}
    					</view>
    					<view v-if="!Array.isArray(item.district)" class="fs26 C999">
    						{{item.district}}
    					</view>
    				</view>
    			</view>
    	</view>
    </template>
    <script>
    import amap from '@/node_modules/amap-wx/amap-wx.js';
    
    export default {
    	data() {
    		return {
    			longitude: 113.947877,
    			latitude: 22.537367,
    			mapInfo: [],
    			markers: [],
    			mapKey: '3fa6b9b58d83770d7af69548e4f9feb8',
    			pois:[],
    			tips:[],
    			address_name:"",
    			address_phone:"",
    			from:""
    			
    			
    		}
    	},
    	created(){
    	
    	},
    	 onLoad(options) {
    		if(options.from == 'sc'){
    			this.from=options.from
    			this.address_name=options.address_name
    			this.address_phone=options.address_phone
    		}
    		//
    		this.amapPlugin = new amap.AMapWX({
    			key: this.mapKey  
    		});
    	
    	
    
    		const that = this
    		that.amapPlugin.getRegeo({
    			type: "gcj02", 
    			success: function(res) {				
    				that.pois=res[0].regeocodeData.pois
    				console.log(that.pois)
    				const latitude = res[0].latitude;
    				const longitude = res[0].longitude;
    				that.longitude = longitude;
    				that.latitude = latitude;
    				that.mapInfo=res[0];
    				console.log(res[0].latitude)
    				console.log(res[0].longitude)
    			},
    			fail: (res) => {
    				console.log(JSON.stringify(res));
    			}
    		}); 
    
    	},
    	
    	onShow(options) {
    		
    	},
    	methods:{
    		choose(index){
    			console.log(this.tips[index].name)
    			console.log(this.tips[index].district)
    			console.log(this.tips[index].location)
    			let addressName = this.tips[index].name
    			let points2 = this.tips[index].location
    			uni.redirectTo({
    				url:"/pagesC/pages/address/addAddress?addressName="+addressName+"&points2="+points2 + "&address_name="+this.address_name+"&address_phone="+this.address_phone
    			})
    			
    		},
    		bindInput: function(e){			
    		    var that = this;
    		    var keywords = e.detail.value; 
    			console.log(keywords)
    		    // var key = config.Config.key;
    		    var myAmapFun = new amap.AMapWX({key: '3fa6b9b58d83770d7af69548e4f9feb8'});
    		    myAmapFun.getInputtips({
    		      keywords: keywords,
    		      location: that.longitude + ',' + that.latitude,
    		      success: function(data){
    				  that.tips=data.tips
    				  console.log(that.tips)
    		      },
    			  fail:err=>{
    				  console.log(err)
    			  }
    		    })
    		  },
    		  bindSearch: function(e){
    		    
    		  },
    		//    点击标记时触发
    		markertap(){
    			
    		},
    		//mapUpdated
    		mapUpdated(){
    			
    		},
    		//
    		closeMapMarker(){
    			
    		},
    		
    		//
    	}
    }
    	</script>
    
    <style>
    @import url('/common/commonCss/dfcCommon.css');
    view {
    	box-sizing: border-box;
    }
    page{
    	background-color: #ffffff;
    	color: rgb(102, 102, 102);
    }
    
    .section{
      height: 30px;
       100%;
    }
    .section input{
      90%;
      margin:5px auto;
      border:1px solid #c3c3c3;
      height:30px;
      border-radius: 3px;
      padding: 0 5px;
    }
    .text_box{
      margin: 10px 25px;
      border-bottom:1px solid #c3c3c3;
      padding-bottom:10px
    }
    
    </style>
    

      

  • 相关阅读:
    【Linux】Linux多个关机命令详解
    【树莓派】树莓派(Debian)- root用户无法使用SSH登录
    【树莓派】树莓派3B安装宝塔面板并配置安装LNMP
    class4/class10/UHS-1/UHS-3 SD卡速度等级区别
    electron-h5-网络状态检测
    electron-消息对话框
    electron-上传文件、保存文件
    electron-子窗口与父窗口通信
    electron-打包
    BrowserView-嵌入网页、open打开子窗口
  • 原文地址:https://www.cnblogs.com/daifuchao/p/13374378.html
Copyright © 2020-2023  润新知