vue2+高德地图web端开发（poi搜索） |
您所在的位置：网站首页 › 在高德地图中搜索 › vue2+高德地图web端开发（poi搜索） |
vue2+高德地图web端开发（poi搜索）
|
本文已参与「新人创作礼」活动，一起开启掘金创作之路。 vue2+高德地图web端开发（poi搜索） 前言本文介绍两种poi搜索方式 借助输入提示结合poi进行搜索 直接进行poi搜索 基础本文基础需要大家知道watch监听机制，高德poi搜索，兄弟组件之间的数据传输 什么是poi搜索高德官方给出即输入关键字后地图进行地点的搜索匹配 1. 输入提示结合poi搜索在上一篇文章中，我们实现了输入提示，于是我们就可以借助输入提示进行poi搜索 官方代码 输入提示后查询 请输入关键字： //地图加载 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); //关键字查询查询 } });根本不用看因为根本不和vue挂钩我们只需要看js部分就行 步骤 1.进行plugins插件注册 plugins: ['AMap.PlaceSearch']这两段逻辑的意思是绑定地图搜索为this.map 使用auto.on的select进行侦听，发现有select事件调用select函数 2.直接进行poi搜索这里我们采用的是和上篇文章一样的兄弟组件之间通信方式来接收值 步骤 1.在Search.vue中我们把接收到的值传到MapContainer.vue中对了别忘记绑定事件 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() } } 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）不要问我里面有些写的是什么东西，如果你有这个疑问那你应该没有好好看前面的几篇文章 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.15 plugins: ['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, //设置地图容器id viewMode: '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) } } } } 结果展示 |
【本文地址】