其他分享
首页 > 其他分享> > 前端系列——vue2+高德地图web端开发（poi搜索两种方式）

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

作者：互联网

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

前言

本文介绍两种poi搜索方式

  1. 借助输入提示结合poi进行搜索
  2. 直接进行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.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)
      }
    }
  }
}
</script>

结果展示

在这里插入图片描述

标签：web,placeSearch,map,AMap,vue2,poi,new,select
来源： https://blog.csdn.net/qq_51553982/article/details/123030334