uniapp 高德地图周边搜索
时间: 2023-12-02 12:42:13 浏览: 126
以下是uniapp中实现高德地图周边搜索的步骤:
1. 在uniapp项目中安装高德地图插件,可以使用uniapp官方提供的插件市场或者手动下载安装。
2. 在需要使用高德地图的页面中引入高德地图插件,并初始化地图。
```javascript
<template>
<view>
<map :longitude="longitude" :latitude="latitude" :markers="markers" :covers="covers" :show-location="true" style="width: 100%; height: 100%;"></map>
</view>
</template>
<script>
import { mapState } from 'vuex'
export default {
computed: {
...mapState(['longitude', 'latitude', 'markers', 'covers'])
},
onReady() {
uni.getLocation({
type: 'gcj02',
success: (res) => {
this.$store.commit('setLocation', res)
}
})
}
}
</script>
```
3. 在页面中添加搜索框和搜索按钮,并在点击搜索按钮时触发搜索事件。
```javascript
<template>
<view>
<input type="text" v-model="keyword" placeholder="请输入关键字" />
<button @click="search">搜索</button>
</view>
</template>
<script>
export default {
data() {
return {
keyword: ''
}
},
methods: {
search() {
uni.showLoading({
title: '搜索中...'
})
let amapFile = require('@/static/js/amap-wx.js')
let myAmapFun = new amapFile.AMapWX({
key: 'your amap key'
})
myAmapFun.getPoiAround({
querykeywords: this.keyword, success: (data) => {
uni.hideLoading()
let pois = data.pois
let markers = []
pois.forEach((item) => {
markers.push({
id: item.id,
latitude: item.location.lat,
longitude: item.location.lng,
title: item.name,
iconPath: '/static/images/marker.png',
width: 32,
height: 32
})
})
this.$store.commit('setMarkers', markers)
},
fail: (info) => {
uni.hideLoading()
uni.showToast({
title: '搜索失败',
icon: 'none'
})
}
})
}
}
}
</script>
```
4. 在搜索事件中调用高德地图插件提供的getPoiAround方法进行周边搜索,并将搜索结果展示在地图上。
```javascript
let amapFile = require('@/static/js/amap-wx.js')
let myAmapFun = new amapFile.AMapWX({
key: 'your amap key'
})
myAmapFun.getPoiAround({
querykeywords: this.keyword,
success: (data) => {
let pois = data.pois
let markers = []
pois.forEach((item) => {
markers.push({
id: item.id,
latitude: item.location.lat,
longitude: item.location.lng,
title: item.name,
iconPath: '/static/images/marker.png',
width: 32,
height: 32
})
})
this.$store.commit('setMarkers', markers)
},
fail: (info) => {
uni.showToast({
title: '搜索失败',
icon: 'none'
})
}
})
```