【uni-app】腾讯地图选点

最新推荐文章于 2025-04-17 16:16:50 发布

路边一只流浪猫

最新推荐文章于 2025-04-17 16:16:50 发布

阅读量2.2k

点赞数 4

分类专栏： uni-app 腾讯位置服务地图选点文章标签： vue js html

本文链接：https://blog.csdn.net/null_nan/article/details/109001056

版权

uni-app 同时被 3 个专栏收录

2 篇文章

订阅专栏

腾讯位置服务

2 篇文章

订阅专栏

地图选点

1 篇文章

订阅专栏

小程序实现地图选点
小程序前提配置appId和位置接口
在这里插入图片描述
需求效果图

在这里插入图片描述

在这里插入图片描述
代码

<template>
 	<view class="content">
		<view class="flexBox">
			<uni-text data-v-2ddb064c="" style="margin-right: 10upx;" class="lg text-gray cuIcon-search"><span></span></uni-text><input style="width: 90%;" type="text" placeholder="搜索地点" :value="searchKey" @input="search"/>
		<view class="" @click="closeCircle">
			<uni-text data-v-2ddb064c="" v-if="empty"  class="lg text-gray cuIcon-roundclose"><span></span></uni-text>
		</view>
		</view>
		<scroll-view scroll-y="true" class="option" v-show="IsOption">
			<view class='column_item' v-for='(item,index) in data' :key='index' @click="tapOption(item)" >
				{{item.title}}
				<view style="font-size: 12px;color: #ccc;">
					{{item.address}}
				</view>
			</view>
		</scroll-view>
 		<view v-show="!IsOption">
 			<view class="page-section page-section-gap">
 			  <map
 			    id="myMap"
 			    style="width: 100%; height: 280px;"
 			    :latitude="latitude"
 			    :longitude="longitude"
 			    :markers="markers"
 				 @poitap = "poitap"
 			    show-location
 			  ></map>
 			</view>
 		</view>
		<view v-show="!IsOption">
			<scroll-view scroll-y="" style="height: 700upx;"  @scrolltolower="moreMessage">
				<view class="" v-for="(item, index) in poitList">
					<view class="poitItem" @click="choosePoit(item,index)">
						<view class="poitDetil">
							<view class="title">
								{{item.title}}
							</view>
							<view class="address">
								{{item.address}}
							</view>
						</view>
						<view class="" v-if="choosePoitFlag == index">
							<uni-text data-v-2ddb064c="" style="color: #0081FF;font-size: 20px;" class="lg text-gray cuIcon-roundcheck"><span></span></uni-text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
 	</view>
 </template>
 
 
 <script>
	 import QQMapWX  from '@/static/js/qqmap-wx-jssdk.js';
 	var self ,mapCtx
	var qqmapsdk
 	export default {
 		onLoad() {
 			self = this
 			// 获取当前map
 			mapCtx =  wx.createMapContext('myMap')
 			self.getAuthorizeInfo()
			 qqmapsdk = new QQMapWX({
							            key: 'BJSBZ-BJ6WJ-CPJFG-KJVTS-SDZU6-P4FHY'
							        });
 		},
 		//相关配置参数
 		data() {
 		
 		  return {
 			  // 初始化的中心位置
 				latitude: 23.099994,
 				longitude: 113.324520,
 				// 标记点
 				markers: [{
 							id: 1,
 							latitude: 23.099994,
 							longitude: 113.324520,
 							name: 'T.I.T 创意园'
 					    }],
			    poitList:[], // 周边地址
				choosePoitFlag: -1,
				data:[],
				IsOption:false,
				searchKey:"",
				empty:false,
				tapOpitItem:{},
				pageIndex:1
 		  }
 		
 		},
 		
 		methods:{
 			// 位置授权
 			 getAuthorizeInfo(){
 			              uni.authorize({
 			                  scope: 'scope.userLocation',
 			                  success() { // 允许授权
							  console.log("确定了")
 			                      self.getLocationInfo();
 			                  },
 			                  fail(){    // 拒绝授权
 			                      self.openConfirm();
 			                      console.log("你拒绝了授权，无法获得周边信息")
 			                  }
 			              })
 			          },
 			 // 获取当前地理位置
 			getLocationInfo(){  
 			              uni.getLocation({
 			                  type: 'wgs84',
 			                  success (res) {
 			                      console.log(res,"当前位置");
 								  // 移动到当前位置
 								 self.toLocation(res)
 								 self.latitude = res.latitude;
 								 self.longitude = res.longitude;
								 self.mapRange(res.latitude,res.longitude)
 			                  }
 			              });
 			          },
 			   // 再次获取授权
 			  // 当用户第一次拒绝后再次请求授权
 			openConfirm(){
 			              uni.showModal({
 			                  title: '请求授权当前位置',
 			                  content: '需要获取您的地理位置，请确认授权',
 			                  success: (res)=> {
 			                      if (res.confirm) {
 			                          uni.openSetting();// 打开地图权限设置
 			                      } else if (res.cancel) {
 			                          uni.showToast({
 			                              title: '你拒绝了授权，无法获得周边信息',
 			                              icon: 'none',
 			                              duration: 1000
 			                          })
 			                      }
 			                  }
 			              });
 			 },
			 // 点击地图位置改变中心位置
			 poitap: function(e){
			 	console.log(e,"poitap")
			 	var obj = e.detail
			 	self.toLocation(obj)
			 },
 			 toLocation:function(obj){
				 // self.choosePoitFlag = -1
				 // 改变地图中心位置
 			 	mapCtx.moveToLocation(obj)
				 // 查询中心点范围内的地址
				 self.mapRange(obj.latitude,obj.longitude)
 				// 移动标记点并添加动画效果
 			 	mapCtx.translateMarker({
 			 	  markerId: 1,
 			 	  autoRotate: true,
 			 	  duration: 100,
 			 	  destination: {
 			 	    latitude:obj.latitude,
 			 	    longitude:obj.longitude,
 			 	  },
 			 	  animationEnd() {
 			 	    console.log('animation end')
 			 	  }
 			 	})
 			 },
			// 查询地址范围
			 mapRange(latitude,longitude){
					let promise = new Promise(function(resolve, reject) {
					// 调用接口
						qqmapsdk.reverseGeocoder({
							location: {
								latitude: latitude,
								longitude: longitude
										},
							get_poi:1,
							poi_options: 'policy=2;radius=3000;page_size=20;page_index='+self.pageIndex,
							success: function (res) {
									if(res.result.pois){
										self.poitList = [...self.poitList,...res.result.pois]
										if(self.tapOpitItem){
											console.log(self.tapOpitItem)
										    console.log(self.poitList)
											self.poitList.map((poitTime,index)=>{
													if(poitTime.title == self.tapOpitItem.title){
														 console.log(index)
														self.choosePoitFlag = index
														}
											})	
										}
									}
									resolve(res)
							},
							 fail: function (res) {
									 reject(res)
							}
						});
					})
							return promise
			},
			// 选择列表地址
			choosePoit(item,index){
				console.log(index)
				self.choosePoitFlag = index
				let obj = {
					latitude: item.location.lat,
					longitude: item.location.lng
				}
				mapCtx.moveToLocation(obj)
				mapCtx.translateMarker({
				  markerId: 1,
				  autoRotate: true,
				  duration: 100,
				  destination: {
				    latitude:obj.latitude,
				    longitude:obj.longitude,
				  },
				})
			},
			//搜索地址
			search:  function(e){
				console.log(e)
				self.searchKey = e.detail.value
				if(self.searchKey){
					self.empty = true
					self.choosePoitFlag = -1
					self.poitList = []
					self.pageIndex = 1
				}else{
					self.empty = false
					self.IsOption = false
				    self.getLocationInfo();
					self.poitList = []
				}
				self.data = []
				var	location = self.latitude+","+ self.longitude
				 self.mapSearch(self.searchKey,location).then(res => {
							self.data = res.data
							if(self.searchKey && self.data.length){
								self.IsOption = true
							}else{
								self.IsOption = false
							}
							
				  		},error => {
							// self.$api.msg('请求失败')
							// console.log(error,"aaaaaaaaaaa");
					})
				
			},
			mapSearch(keyword,location){
				let promise = new Promise(function(resolve, reject) {
					// 调用接口
					      qqmapsdk.search({
								keyword: keyword,//搜索关键词
								location:location ,  //设置周边搜索中心点
					          success: function (res) {
					             resolve(res)
					          },
					          fail: function (res) {
					             reject(res)
					          }
					  });
				})
				return promise
				  
			},
 		    // 清空搜索框
			closeCircle(){
				self.data = []
				self.searchKey = ''
				self.empty = false
				self.IsOption = false
			    self.choosePoitFlag = -1
				self.poitList = []
				self.pageIndex = 1
				self.getLocationInfo();
			},
			// 选择搜索地址
			tapOption(item){
				console.log(item)
				self.tapOpitItem = item
				self.IsOption = false
				let obj = {
					latitude: item.location.lat,
					longitude: item.location.lng
				}
				self.toLocation(obj)
			},
			// 上拉加载
			moreMessage(){
						self.pageIndex += 1;
						self.mapRange(self.latitude,self.longitude);
					},
 		}
 	}
 </script>
 
 <style>
	 page{
		 background-color: #fff;
	 }
 	.page-section-gap{
 	  box-sizing: border-box;
 	  padding: 0 30rpx;
 	}
 	
 	.page-body-button {
 	  margin-bottom: 30rpx;
 	}
	.poitItem{
		display: flex;
		align-items: center;
		width: 100%;
	}
	.poitDetil{
		width: 90%;
		padding: 30upx;
	
	}
	.poitDetil .title{
		font-size: 18px;
	}
	.address{
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 14px;
		color: #808080;
	}
	.flexBox{
			display: flex;
			align-items: center;
			background-color: #f4f4f4;
			padding: 10upx 20upx;
			border-radius: 50upx;
			margin: 30upx 20upx;
		}
		.iconPadding{
			padding-left: 20upx;
		}
		.citystyle{
			border-right: 2upx solid #ccc;
			padding-right: 20upx;
		}
		.close-btn{
			display: flex;
			justify-content: space-evenly;
			margin: 20upx;
			margin-top: 40upx;
			}
		.pop-box{
			margin-top: 30upx;
			font-size: 14px;
		}
		.pop-title{
			font-weight: 700;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.pop-detile{
			margin: 20upx;
		}
		.pop-input{
			display: flex;
			margin-top: 20upx;
		}
	.option{
		line-height: 45rpx;
		position: fixed;
		top: 128rpx;
		z-index: 9999;
	}
	.column_item{
		padding:10upx 40rpx;
		/* height: 60rpx; */
		overflow: hidden;
		margin:0rpx auto;
		background-color: #fff;
		text-overflow: ellipsis;
		white-space: nowrap;
		border-bottom: 2upx solid #ccc;
	}
	.column_item:active{
		background-color: #8F8F94;
	}
	
	.page-section-gap{
	  box-sizing: border-box;
	}
	.text-gray{
		font-size: 18px;
		}
 </style>

h5和浏览器实现地图选点**

看官网即可https://lbs.qq.com/webApi/component/componentGuide/componentPicker
需要在官网申请key值

<web-view src="https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=你的key值&referer=myapp"></web-view>

监听点击地址返回的信息

// #ifdef H5
window.addEventListener('message', event=> {
  // 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
    var loc = event.data;
	if (loc && loc.module == 'locationPicker') {
        //防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
        console.log('location', loc);
	}
}, false);
// #endif