vue中使用高德地图POI
作者:互联网
一、使用AMap-Vue
安装
yarn add @amap/amap-vue # 或 npm install --save @amap/amap-vue
二、引入在main.js
import AmapVue from '@amap/amap-vue'
AmapVue.config.version = '2.0' // 默认2.0,这里可以不修改
AmapVue.config.key = '申请的key值'
Vue.use(AmapVue)
三、使用
<template>
<div style="width: 100%; height: 400px;">
<amap
cache-key="coord-picker-map"
mmap-style="amap://styles/whitesmoke"
async
:center.sync="center"
:zoom.sync="zoom"
is-hotspot
@click="onMapClick"
>
<amap-marker v-if="position" :position.sync="position" draggable />
<el-col :span="7">
<el-card shadow="always">
<div v-if="mode === 'search'" style="display: flex;justify-content: space-between;">
<el-autocomplete
v-model="query"
style="width: 80%;"
class="inline-input"
:fetch-suggestions="querySearch"
placeholder="请输入关键词"
:trigger-on-focus="false"
@select="handleSelect"
/>
<el-button type="primary" :disabled="!query" @click="mapSearch">搜索</el-button>
</div>
<template v-if="mode === 'result'">
<div class="search-bar">
<el-button icon="el-icon-arrow-left" @click="reset" />
<span
class="text"
>搜索 {{ query }} 共
{{ total }} 条结果</span>
</div>
<el-pagination
v-if="total > 0"
layout="prev, pager, next"
:total="total"
@current-change="handleCurrentChange"
/>
<div v-for="option in results" :key="option.id" class="addressList" @click="focus(option)">
<div style="font-size:15px">{{ option.name }}</div>
<div style="font-size:10px">{{ option.address }}</div>
</div>
</template>
</el-card>
</el-col>
</amap>
</div>
</template>
<script>
import Amap from '@amap/amap-vue/lib/amap'
import { loadAmap, loadPlugins } from '@amap/amap-vue'
export default {
components: { Amap },
data() {
return {
zoom: 10,
mode: 'search', // 地图搜索的标识
total: 0, // 一共多少页面
tips: [],
query: '', // 搜索的值
showMap: false, // 弹出框
pageSize: 10, // 分页个数
results: [], // 返回的数据
position: '', // 坐标地址
center: null // 地图地址
}
},
watch: {
pageIndex(value) {
this.ps.setPageIndex(value)
}
},
async mounted() {
const AMap = await loadAmap()
await loadPlugins(['AMap.PlaceSearch', 'AMap.AutoComplete'])
this.ps = new AMap.PlaceSearch({
pageSize: this.pageSize
})
this.ac = new AMap.AutoComplete()
},
methods: {
// 匹配的值
querySearch(queryString, cb) {
if (!queryString) {
cb([])
} else {
this.ac.search(queryString, (status, result) => {
if (queryString !== this.query) return
if (status === 'complete' && result.tips) {
const tips = Array.from(new Set(result.tips.map(tip => {
return {
value: tip.district + tip.name
}
})))
cb(tips)
} else {
cb([])
}
})
}
},
// 点击确认
search(item) {
this.showMap = false
item.address = this.addressName
},
// 点击搜索
mapSearch() {
this.mode = 'result'
this.getMapList()
},
// map地图返回按钮
reset() {
this.ps.setPageIndex(1)
this.results = []
this.tips = []
this.total = 0
this.mode = 'search'
},
// 点击搜索的地址
focus(poi) {
console.log('poi', poi)
this.addressName = poi.name
const pos = [poi.location.lng, poi.location.lat]
this.position = [...pos]
this.center = [...pos]
},
// 点击分页器
handleCurrentChange(val) {
this.pageIndex = val
this.ps.setPageIndex(val)
this.getMapList()
},
onMapClick(e) {
if (e.lnglat) {
this.position = [e.lnglat.lng, e.lnglat.lat]
} else {
this.position = null
}
},
// 获取搜索显示的列表
getMapList() {
const { query } = this
this.ps.search(query, (status, result) => {
if (query !== this.query) return
if (status === 'complete' && result.poiList) {
this.results = result.poiList.pois
this.total = result.poiList.count
} else {
this.results = []
this.total = 0
}
})
},
// 点击选择地图
mapSelection() {
this.showMap = true
this.query = ''
this.results = []
this.total = 0
this.pageIndex = 1
this.ps.setPageIndex(1)
}
}
}
</script>
标签:vue,result,POI,query,tips,total,AMap,高德,amap 来源: https://blog.csdn.net/weixin_51052779/article/details/122347139