腾讯地图地点搜索
<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>
运行展示