vue中使用高德地图POI

一、使用AMap-Vue

地址：坐标拾取工具 | 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;"><amapcache-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-autocompletev-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" /><spanclass="text">搜索 {{ query }} 共{{ total }} 条结果</span></div><el-paginationv-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) returnif (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 = falseitem.address = this.addressName},// 点击搜索mapSearch() {this.mode = 'result'this.getMapList()},// map地图返回按钮reset() {this.ps.setPageIndex(1)this.results = []this.tips = []this.total = 0this.mode = 'search'},// 点击搜索的地址focus(poi) {console.log('poi', poi)this.addressName = poi.nameconst pos = [poi.location.lng, poi.location.lat]this.position = [...pos]this.center = [...pos]},// 点击分页器handleCurrentChange(val) {this.pageIndex = valthis.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 } = thisthis.ps.search(query, (status, result) => {if (query !== this.query) returnif (status === 'complete' && result.poiList) {this.results = result.poiList.poisthis.total = result.poiList.count} else {this.results = []this.total = 0}})},// 点击选择地图mapSelection() {this.showMap = truethis.query = ''this.results = []this.total = 0this.pageIndex = 1this.ps.setPageIndex(1)}}
}
</script>

vue中使用高德地图POI相关推荐

在Vue中使用高德地图
在Vue中使用高德地图一.如何在Vue中引入基础高德地图 1.步骤一:注册并登录高德地图开放平台,申请密钥 2.步骤二:安装高德地图加载器 3.封装一个自定义地图组件,并初始化地图二.根据关键词搜 ...
Vue中使用高德地图
Vue中使用高德地图定位及poi搜索,以及其他插件的使用方法 1.第一步安装 npm install vue-amap --save 2.引入vue-amap main.js import Vue f ...
vue中引用高德地图根据经纬度计算两地距离
vue中引用高德地图根据经纬度计算两地距离一.示例图: npm安装 npm install vue-amap --save 在min.js文件中引入vue-amap import VueAMap f ...
Vue中使用高德地图，简单明了
一.使用步骤 1.在vue中引入高德地图的加载器 npm i @amap/amap-jsapi-loader --save 在自己的组件中去引用 <template>//这个div就是 ...
Vue中使用高德地图（vue-amap）的采坑记录小白入门
这里写目录标题写在开始 step.1 安装组件 step.2 引入组件 step.3注册高德高德开发者账号,申请KEY step.4 正式使用写在开始俗话说授人以鱼不如授人以渔,直接记录代码的话 ...
在vue中使用高德地图的下属省市区查询，实现省市区的联动以及规划范围
在vue中使用高德地图的下属省市区查询,实现省市区的联动以及规划范围一.先上效果图二.高德地图Vue引用一.先上效果图二.高德地图Vue引用 1. webpack引入高德在webpack.b ...
vue中引入高德地图Loca数据可视化
目录引言: 关键词: 正文: 一.如何安装或者引入: 二.如何引入: 三.如何使用: 四.完整代码: 五.效果图参考: 引言: 前面我的文章介绍了vue中引入高德地图实例的,详情可以去参考,由于需 ...
Vue中集成高德地图API实现定位与自定义样式信息窗体
场景若依前后端分离版手把手教你本地搭建环境并运行项目: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/108465662 在上面 ...
Vue 中使用高德地图api
比较简单的原生方式 <template><div style="margin: 0px;padding: 0px"><div id="pan ...

vue中使用高德地图POI

vue中使用高德地图POI相关推荐

最新文章

热门文章