uniapp--腾讯地图地点搜索

腾讯地图地点搜索

<template>
	<view class="">
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">地点搜索</block>
		</cu-custom>
		<view class="u-demo-block__content section">
			<view class="u-page__tag-item">
				<u-search v-model="value" @custom='sectionText'></u-search>
			</view>
		</view>
		<view class="map">
			<map :latitude="latitude" :longitude="longitude" enable-3D="true" show-compass="true" show-location :markers="covers" @markertap="marketap"></map>
		</view>
	</view>
</template>

<script>
	// 引入SDK核心类  地图组件
	import QQMapWX from '../components/qqmap-wx-jssdk1.2/qqmap-wx-jssdk.js'
	export default{
		data(){
			return{
				qqmapsdk:{},  // 腾讯地图小程序SDK
				value: '',  // 搜索框中的值
				latitude: '',   // 纬度
				longitude: '',  // 经度
				covers:[],  // 标记点
			}
		},
		onLoad() {
			// 实例化API核心类
			this.qqmapsdk = new QQMapWX({
				key: ''  // 自己申请的key值
			})
			// 获取用户当前位置
			this.getUserMap()
		},
		methods:{
			// 获取用户当前位置
			getUserMap(){
				uni.getLocation({
					type:'gcj02',
					isHighAccuracy: true,   // 开启高精度定位
					success: (e) => {
						this.latitude = e.latitude
						this.longitude = e.longitude
					}
				})
			},
			// 搜索地点
			sectionText(e){
				// console.log(e,'搜索')
				let that = this
				that.covers = []
				that.qqmapsdk.search({
					keyword: that.value,  // 搜索的关键字
					location:{  // 当前位置坐标
						latitude: that.latitude,
						longitude: that.longitude
					},
					page_size: 10,  // 每页条目数
					page_index:1,  // 第一页
					success(res){
						console.log('搜索成功',res)
						res.data.forEach(item=>{
							let obj = {
								latitude: item.location.lat,
								longitude: item.location.lng,
								width: 20,
								height: 30,
							}
							that.covers.push(obj)
						})
					}
				})
			},
			// 点击标记点触发
			marketap(e){
				console.log(e)
			}
		}
	}
</script>

<style>
	page{
		width: 100%;
		height: 100%;
		background-color: #ffffff;
	}
</style>
<style lang="scss" scoped>
	.section{
		margin-top: 10rpx;
	}
	.map{
		margin-top: 10rpx;
		width: 100%;
		height: 800rpx;
		map{
			width: 100%;
			height: 100%;
		}
	}
</style>

运行展示