前端系列——vue2+高德地图web端开发（poi搜索）

前言
- 基础
- 什么是poi搜索
1. 输入提示结合poi搜索
- 官方代码
- 步骤
- - 1.进行plugins插件注册
  - 2.data中编写placeSearch变量
  - 3.在methods中编写select函数
  - 4.在initMap函数中增加poi搜索处理逻辑
  - - 解释
2.直接进行poi搜索
- 步骤
- - 1.在Search.vue中我们把接收到的值传到MapContainer.vue中
  - 2.在MapContainer.vue中接收
  - 3.编写watch进行监听
完整代码（MapContainer.vue）
结果展示

前言

本文介绍两种poi搜索方式

借助输入提示结合poi进行搜索
直接进行poi搜索

基础

本文基础需要大家知道watch监听机制，高德poi搜索，兄弟组件之间的数据传输

什么是poi搜索

高德官方给出即输入关键字后地图进行地点的搜索匹配

1. 输入提示结合poi搜索

在上一篇文章中，我们实现了输入提示，于是我们就可以借助输入提示进行poi搜索

官方代码

<!doctype html>
<html>
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"><title>输入提示后查询</title><link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css"/><script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=您申请的key值"></script>
</head>
<body>
<div id="container"></div>
<div id="myPageTop"><table><tr><td><label>请输入关键字：</label></td></tr><tr><td><input id="tipinput"/></td></tr></table>
</div>
<script type="text/javascript">//地图加载var map = new AMap.Map("container", {resizeEnable: true});//输入提示var autoOptions = {input: "tipinput"};AMap.plugin(['AMap.PlaceSearch','AMap.AutoComplete'], function(){var auto = new AMap.AutoComplete(autoOptions);var placeSearch = new AMap.PlaceSearch({map: map});  //构造地点查询类auto.on("select", select);//注册监听，当选中某条记录时会触发function select(e) {placeSearch.setCity(e.poi.adcode);placeSearch.search(e.poi.name);  //关键字查询查询}});
</script>
</body>
</html>

根本不用看因为根本不和vue挂钩我们只需要看js部分就行

步骤

1.进行plugins插件注册

plugins: ['AMap.PlaceSearch']

2.data中编写placeSearch变量

placeSearch:null

3.在methods中编写select函数

select(e) {this.placeSearch.setCity(e.poi.adcode)this.placeSearch.search(e.poi.name) //关键字查询查询}

4.在initMap函数中增加poi搜索处理逻辑

this.placeSearch = new AMap.PlaceSearch({map: this.map}) //构造地点查询类
this.auto.on('select', this.select)

解释

这两段逻辑的意思是绑定地图搜索为this.map
使用auto.on的select进行侦听，发现有select事件调用select函数

2.直接进行poi搜索

这里我们采用的是和上篇文章一样的兄弟组件之间通信方式来接收值

步骤

1.在Search.vue中我们把接收到的值传到MapContainer.vue中

对了别忘记绑定事件

<el-input placeholder="请输入内容" v-model="input" :id="search_id"></el-input>
<el-button type="primary" icon="el-icon-search" @click="sendMsg"></el-button>
<script>
import bus from '@/eventBus/eventBus.js'
export default {data() {return {search_id: 'searchId',input: ''}},methods: {sendMsg() {bus.$emit('share', this.input)},sendId() {bus.$emit('share_id', this.search_id)}},mounted() {this.sendId()}
}
</script>

2.在MapContainer.vue中接收

 data() {return {autoOptions: {input: ''},searchPlaceInput: ''}},
created() {bus.$on('share_id', val => {this.autoOptions.input = val}),bus.$on('share', val => {this.searchPlaceInput = val})},

3.编写watch进行监听

当searchPlaceInput变量得到新值就会触发search函数进行搜索

watch: {searchPlaceInput(newValue) {if (newValue != null) {this.placeSearch.search(newValue)}}}

完整代码（MapContainer.vue）

不要问我里面有些写的是什么东西，如果你有这个疑问那你应该没有好好看前面的几篇文章

<script>
import bus from '@/eventBus/eventBus.js'
import AMapLoader from '@amap/amap-jsapi-loader'
export default {data() {return {map: null,autoOptions: {input: ''},auto: null,placeSearch: null,searchPlaceInput: ''}},created() {bus.$on('share_id', val => {this.autoOptions.input = val}),bus.$on('share', val => {this.searchPlaceInput = val})},methods: {initMap() {AMapLoader.load({key: '2c1c4affeb410923990fec54c5af721a', // 申请好的Web端开发者Key，首次调用 load 时必填version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15plugins: ['AMap.ToolBar', 'AMap.Scale', 'AMap.HawkEye', 'AMap.MapType', 'AMap.Geolocation', 'AMap.PlaceSearch', 'AMap.AutoComplete'] // 需要使用的的插件列表，如比例尺'AMap.Scale'等}).then(AMap => {this.map = new AMap.Map('container', {resizeEnable: true,//设置地图容器idviewMode: '3D', //是否为3D地图模式zoom: 14, //初始化地图级别center: [121.473667, 31.230525] //初始化地图中心点位置})this.map.addControl(new AMap.Scale())this.map.addControl(new AMap.ToolBar())this.map.addControl(new AMap.HawkEye())this.map.addControl(new AMap.MapType())this.map.addControl(new AMap.Geolocation())this.auto = new AMap.AutoComplete(this.autoOptions)this.placeSearch = new AMap.PlaceSearch({map: this.map}) //构造地点查询类this.auto.on('select', this.select)}).catch(e => {console.log(e)})},select(e) {this.placeSearch.setCity(e.poi.adcode)this.placeSearch.search(e.poi.name) //关键字查询查询}},mounted() {//DOM初始化完成进行地图初始化this.initMap()},watch: {searchPlaceInput(newValue) {if (newValue != null) {this.placeSearch.search(newValue)}}}
}
</script>

结果展示

前端系列——vue2+高德地图web端开发（poi搜索两种方式）相关推荐

前端系列——vue2+高德地图web端开发（使用和引入）
vue2+高德地图web端开发(使用和引入) 前言基础准备工作高德地图的个人开发者注册高德api网址 1.点击进行注册 2.注册完之后进入控制台 3.创建新应用 4.添加高德 2.0 新增 ...
前端系列——vue2+高德地图web端开发（行政区边界绘制）
vue2+高德地图web端开发(行政区边界绘制) 前言原理基础实现步骤 1.eslint设置AMap为全局变量放置报错 2.Search.vue传输给MapContainer.vue数据然后进行 ...
基于web端和C++的两种深度学习模型部署方式
深度学习Author:louwillMachine Learning Lab 本文对深度学习两种模型部署方式进行总结和梳理.一种是基于web服务端的模型部署,一种是基... 深度学习 Author:l ...
python 收发微信之一：利用 WxPusher 的 web api 及 python SDK 两种方式给自己发微信
目录摘要实操代码分析需求来源与路径选择参考摘要本文给出利用 WxPusher 提供的 web api 与 python SDK 两种方式,实现微信发送的 python 代码样例,并简单 ...
高德地图Web端JavaScript API开发(一)---个性化展示(自定义地图)
遇到一个功能,需要使用地图功能,但是地图上不要显示太多的物体,不然会遮盖地图上的标记,因此需要自定义地图,去掉一些不需要的覆盖物. 话不多说,直接走步骤! First. 需要登录高德开发者控制台,在地 ...
【深度学习】基于web端和C++的两种深度学习模型部署方式
深度学习 Author:louwill Machine Learning Lab 本文对深度学习两种模型部署方式进行总结和梳理.一种是基于web服务端的模型部署,一种是基于C++软件集成的方式进行部署 ...
Express全系列教程之(四)：获取Post参数的两种方式
一.关于POST请求 post方法作为http请求很重要的一部分,几乎所有的网站都有用到它,与get不同,post请求更像是在服务器上做修改操作,它一般用于数据资源的更新. 相比于get请求,post ...
高德地图Web端JavaScript API开发(二)---在地图上绘制(点标注)
使用高德地图在很多时候需要在地图上标记位置,并且很多时候需要用到自定义的图标去完成这种位置的标记. 当然,这些功能高德地图都为我们准备了,比如常用的地图覆盖物Marker和信息窗体等.这里就先说一下点 ...
高德地图web端接入
1.准备阶段进入高德开发平台(高德开放平台 | 高德地图API),登录你的账号,如果没有账号需要先注册,进行开发者的认证,这里由于我已经认证过了,所以直接注册流程就不展示了. 打开控制台,选择应用管 ...

前端系列——vue2+高德地图web端开发（poi搜索两种方式）