vue项目中调用高德地图vue-amap 插件 的AMap.PlaceSearch简用

1.下载 npm install vue-amap --save

2.直接在mian.js

import AMap from 'vue-amap';
Vue.use(AMap);
// 初始化vue-amap
AMap.initAMapApiLoader({
    // 高德key
    key: '自己的高德key',
    // 插件集合 （插件按需引入）
    plugin: ['AMap.Geolocation', 'AMap.PlaceSearch', 'AMap.ToolBar', 'AMap.Geocoder']
  });

3.组件页面代码

<template>
  <div :style="conheight">
    
    <div class="search-div" >
      <el-input id="tipInput" v-model="inputSearchVal" placeholder="请输入搜索名称">
        
      el-input>
    div>
    
  div>
template>

<script>
export default {
  name: 'mapDetail',
  data () {
    return {
      // 地图map对象
      map: undefined,
      // 组件
      autoCompleteComponent: undefined,
      placeSearchComponent: undefined,

      // 样式
      conheight: {
        height: '600px',
        width: ''
      },
      // marker点集合
      markerList: [],
      mapInput: '',
      inputSearchVal: '',
      
    };
  },
  // created(){
  //     window.addEventListener('resize', this.handleResize);
  // },
  // beforeDestroy: function () {
  //     window.removeEventListener('resize', this.handleResize);
  // },
  // computed: {
  //     rightWidth(){
  //         let leftWidth = this.isCollapse ? '64' : '200';
  //         console.log(this.conheight.width);
  //         return (this.conheight.width-leftWidth)+'px';
  //     }
  // },
  mounted () {
    this.init();
    // this.addMarker();
    this.mapSearchInit();
  },
  methods: {
   
    /** 初始化map对象 */
    init: function () {
      let map = new AMap.Map('container', {
        center: [116.397428, 39.90923],
        resizeEnable: true,
        zoom: 15,
        lang: 'cn'
      });
      AMap.plugin(['AMap.ToolBar', 'AMap.Scale'], function () {
        map.addControl(new AMap.ToolBar());
        map.addControl(new AMap.Scale());
      });
      this.map = map;
    },
    /** 初始化搜索工具 */
    mapSearchInit(){
      let that = this;
      // 绑定自动提示
      AMap.plugin(['AMap.Autocomplete', 'AMap.PlaceSearch'], function(){
        var autoOptions = {
          input: 'tipInput',
          city: '北京',
        };
        var autoCompleteComponent= new AMap.Autocomplete(autoOptions);
        // 监听选中项
        AMap.event.addListener(autoCompleteComponent, 'select', function(data){
          console.log(data);
          if ( data.poi.location != undefined){
            //定位到中心点
            console.log('定位中心点');
            that.map.setCenter(data.poi.location);

            //TODO 获取数据，对数据进行操作如：添加marker等
            
          }
        
        });
        that.autoCompleteComponent = autoCompleteComponent;
        // 注册placeSearch组件
        that.placeSearchComponent = new AMap.PlaceSearch({
          // city 指定搜索所在城市，支持传入格式有：城市名、citycode和adcode
          city: '北京'
        });
      });
    },
    /** 关键词搜索 */
    searchKeyword(){
      this.placeSearchComponent.search(this.inputSearchVal, function (status, result) {
        // 查询成功时，result即对应匹配的POI信息
        console.log(status);
        console.log(result);
      });
    },
    /** 打开marker消息窗体 */
    // openInfo(positionResult, pointData) {
    //     var info = [];
    //     info.push('
');
    //     info.push('
高德软件
');
    //     info.push('
电话 : 010-84107000   邮编 : 100102
');
    //     info.push('
地址 :北京市朝阳区望京阜荣街10号首开广场4层
');

    //     let infoWindow = new AMap.InfoWindow({
    //         content: info.join(''),
    //         offset: new AMap.Pixel(10, -25)
    //     });
    //     infoWindow.open(this.map, positionResult.lnglat);
    // },
    /** 添加marker */
    // addMarker(){
    //   let that = this;
    //   var marker = new AMap.Marker({
    //       position: new AMap.LngLat(116.397428, 39.90923), 
    //       title: '北京',
    //       extData: { id: '123456' }
    //   });
    //   //绑定点击事件
    //   marker.on('click', positionResult => {
    //     console.log(positionResult);
    //     let pointData = positionResult.target.getExtData();
    //     that.openInfo( positionResult, pointData);
    //   });
    //   this.markerList.push(marker);
    //   this.map.add(this.markerList);
    // },
     /** 处理宽 */
    // handleResize (event) {
    //     this.conheight.width = document.documentElement.clientWidth;
    //     this.conheight.height = document.documentElement.clientHeight;
    //     console.log(document.documentElement.clientHeight);
    // },

  },
};
script>

<style>
.search-div {
  display: flex;
  align-items: center;
  width: 300px;
  height: 40px;
  box-sizing: border-box;
}
style>

使用dialog,搜索出来的结果会在蒙版后面显示，index.html 或者app.vue加样式。代码如下：

.amap-sug-result {
z-index: 99999!important;

}