vue高德地图搜索功能

最新推荐文章于 2025-10-15 17:10:02 发布

原创最新推荐文章于 2025-10-15 17:10:02 发布 · 1.2w 阅读

30 ·

CC 4.0 BY-SA版权

文章标签：

#vue #高德地图 #搜索功能

WEB前端专栏收录该内容

15 篇文章

订阅专栏

一、开发环境：

vue版本：v2.5.2

vue-cli版本：v2.9.3

webpack版本：3.6.0

高德地图api版本：JavaScript API V1.4.12

二、直入主题

首先在，index.html文件中引入高德地图api

    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.12&key=你的高德地图key"></script>

然后，更改webpack配置文件 build/webpack.base.conf.js，在module.exports中添加externals字段

module.exports = {
....

externals: {
    'AMap': 'AMap'
  }
}

如果是vue-cli3版本，请在项目的根目录的vue.config.js文件中修改webpack配置

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.externals: {
        'AMap': 'AMap'
       }
  }
}

代码：

<template>
  <div style="position: relative;width: 100%;height: 100%;">
    <div id="container" style="width:100%; height:100%">
    </div>
    <div id="panel"></div>
    <div id="myPageTop" style="position: absolute;top: 20px;right: 50px;background: #fff;">
      <table>
        <tr>
          <td>
            <label>请输入关键字：</label>
          </td>
        </tr>
        <tr>
          <td>
            <input v-model="input" id="tipinput"/><button @click="searchAddress">搜索</button>
          </td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
  import AMap from 'AMap';

  var map, placeSearch;
  export default {
    name: "AMap",
    data() {
      return {
        input: ''
      }
    },
    mounted: function () {
      this.AMapInit()
    },
    methods: {
      AMapInit: function () {
        map = new AMap.Map('container', {
          resizeEnable: true,
          zoom: 10
        })
        AMap.service(["AMap.PlaceSearch"], function () {
          //构造地点查询类
          placeSearch = new AMap.PlaceSearch({
            pageSize: 5, // 单页显示结果条数
            pageIndex: 1, // 页码
            citylimit: false,  //是否强制限制在设置的城市内搜索
            map: map, // 展现结果的地图实例
            panel: "panel", // 结果列表将在此容器中进行展示。
            autoFitView: true, // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
            renderStyle: 'default'
          });

        });
        // 添加列表点选监听事件
        AMap.event.addListener(placeSearch, "selectChanged", this.selectAddress);
      },
      searchAddress() {
        placeSearch.search(this.input);

      },
      selectAddress(e) {
        //这里获得点选地点的经纬度
        let location = e.selected.data.location;
        console.log('lng',location.lng);
        console.log('lat',location.lat);
        // Do Something
      }
    }
  }
</script>

<style type="text/css">
  html,body,#app{
    height: 100%;
    width: 100%;
  }
  #panel {
    position: absolute;
    background-color: white;
    max-height: 90%;
    overflow-y: auto;
    top: 80px;
    right: 10px;
    width: 280px;
  }
</style>

初始化结果：

搜索地点：

地点经纬度：

接下来根据经纬度可以实现其他功能。

三、总结

高德地图api接口比较丰富，只要开动脑筋组合使用起来，大多的需求都能实现。本次主要使用了POI搜索插件AMap.PlaceSearch，原官方的Demo中使用了AMap.AutoComplete，本次根据实际项目需求去掉了，结合了带列表的POI搜索的这个Demo,再将监听事件改为列表点选的selectChange事件，获得当前点选地点经纬度，这样将二者进行了组合一下实现了以上的搜索以及展现方式，查看AMap.PlaceSearch全部属性和方法，查看AMap.Autocomplete全部属性和方法。

THE END