vue2引入高德地图-实现自定义搜索框搜索数据

实现效果图：

1.安装高德地图插件

 npm i @amap/amap-jsapi-loader --save-d

2.template模板部分 dialogWrap是自己封装的弹窗组件（根据el-dialog封装的组件）

1.  
   <dialogWrap :visible.sync="show_"
2.  
   width="800px"
3.  
   top="10vh"
4.  
   title="地址识别"
5.  
   @confirm="getAddress">
6.  
   <div class='map-wrap'>
7.  
   <div id="container"></div>
8.  
   <div class="search-wrap">
9.  
   <!-- 搜索框 -->
10.  
    <div class="search">
11.  
    <el-input placeholder="请输入内容"
12.  
    v-model="address"
13.  
    class="input-with-select"
14.  
    clearable>
15.  
    <!-- @input="handleSearch" -->
16.  
    <el-button slot="append"
17.  
    icon="el-icon-search"
18.  
    @click="handleSearch"></el-button>
19.  
    </el-input>
20.  
    </div>
21.  
    <!-- 检索结果 -->
22.  
    <div v-show="showResultFlag"
23.  
    class="search-result">
24.  
    <div v-for="(item, index) in searchResult"
25.  
    class="item"
26.  
    :key="index"
27.  
    @click="reverseeocoding(item.location,item.name)">
28.  
    <i class="el-icon-search fl mgr10" />
29.  
    <div style="overflow:hidden;">
30.  
    <div class="title">{{ item.name }}</div>
31.  
    <span class="address ellipsis">{{ item.district item.address }}</span>
32.  
    </div>
33.  
    </div>
34.  
    </div>
35.  
    </div>
36.  
    </div>
37.  
    </dialogWrap>

3.js实现逻辑部分

1.  
   <script>
2.  
   import dialogWrap from "../dialog/dialogWrap";
3.  
   import AMapLoader from "@amap/amap-jsapi-loader";
4.  
   window._AMapSecurityConfig = {
5.  
   securityJsCode: "自己申请的高德的安全秘钥",
6.  
   };
7.  
   const defaultInfo = {
8.  
   addressAll: '', //详细地址
9.  
   address: '', //搜索栏的title | 点击地图的街道号
10.  
    province: '', // 省
11.  
    city: '', // 市
12.  
    district: '', // 区
13.  
    street: '' // 街道
14.  
    }
15.  
    export default {
16.  
    props: {
17.  
    emitName: String,
18.  
    show: {
19.  
    type: Boolean,
20.  
    default: false,
21.  
    },
22.  
    // 是否只显示到街道
23.  
    isToStreet: {
24.  
    type: Boolean,
25.  
    default: false,
26.  
    }
27.  
    },
28.  
    components: {
29.  
    dialogWrap,
30.  
    },
31.  
    name: 'Map',
32.  
    data () {
33.  
    return {
34.  
    AMap: null,
35.  
    map: null,
36.  
    zoom: 15,//地图放大缩小的值
37.  
    address: '',//搜索地址
38.  
    searchResult: [],//自动匹配地址结果
39.  
    showResultFlag: false,
40.  
    selectInfo: Object.assign({}, defaultInfo),
41.  
    showInfo: false,
42.  
    lngLat: '',
43.  
    location: '',
44.  
    }
45.  
    },
46.  
    computed: {
47.  
    show_: {
48.  
    get () {
49.  
    return this.show
50.  
    },
51.  
    set (newVal) {
52.  
    this.$emit('update:show', newVal)
53.  
    },
54.  
    },
55.  
    },
56.  
    watch: {
57.  
    show_ (v) {
58.  
    if (v) {
59.  
    this.address = ''
60.  
    this.showResultFlag = false
61.  
    this.selectInfo = this.$options.data().selectInfo
62.  
    this.initMap()
63.  
    }
64.  
    }
65.  
    },
66.  
     
67.  
    methods: {
68.  
    initMap () {
69.  
    AMapLoader.load({
70.  
    key: "自己申请的高德的Web端开发者Key", // 申请好的Web端开发者Key，首次调用 load 时必填
71.  
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
72.  
    plugins: [
73.  
    "AMap.AutoComplete",
74.  
    "AMap.PlaceSearch",
75.  
    "AMap.Geocoder",
76.  
    ], // 需要使用的的插件列表
77.  
    })
78.  
    .then((AMap) => {
79.  
    this.AMap = AMap
80.  
    this.map = new AMap.Map("container", {
81.  
    //设置地图容器id
82.  
    zoom: 10, //初始化地图级别
83.  
    center: [121.473667, 31.230525], //初始化地图中心点位置
84.  
    });
85.  
    this.auto = new AMap.AutoComplete(this.autoOptions);
86.  
    this.placeSearch = new AMap.PlaceSearch({
87.  
    map: this.map,
88.  
    }); //构造地点查询类
89.  
     
90.  
    this.map.on("click", (e) => {
91.  
    this.showResultFlag = false
92.  
    this.reverseeocoding(e.lnglat)
93.  
    });
94.  
    //添加固定点标记
95.  
    let marker1 = new AMap.Marker({
96.  
    position: new AMap.LngLat(121.473667, 31.230525), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
97.  
    });
98.  
    //添加点标记
99.  
    this.map.add(marker1);
100.  
     })
101.  
     .catch((e) => {
102.  
     console.log(e);
103.  
     });
104.  
     },
105.  
     submit () {
106.  
     this.showInfo = false
107.  
     this.show_ = false
108.  
     top.window.$bus.$emit(`get-address-map-data${this.emitName ? '-' this.emitName : ''}`, JSON.parse(JSON.stringify(this.selectInfo)))
109.  
     },
110.  
     handleSearch () {
111.  
     let self = this
112.  
     if (this.address != null) {
113.  
     this.auto.search(this.address, function (status, res) {
114.  
     console.log(status, res);
115.  
     // 查询成功时，res返回对应匹配的POI信息
116.  
     if (res && res.tips) {
117.  
     self.searchResult = [...res.tips]
118.  
     if (self.searchResult.length > 0) {
119.  
     self.showResultFlag = true
120.  
     } else {
121.  
     self.showResultFlag = false
122.  
     }
123.  
     } else {
124.  
     self.showResultFlag = false
125.  
     }
126.  
     });
127.  
     this.map.setZoom(16, true, 1);
128.  
     }
129.  
     },
130.  
      
131.  
     /** 逆地址解析
132.  
     * @param {Object} point 经纬度
133.  
     * @param {String} title 搜索栏下拉数据展示的title名称
134.  
     */
135.  
     reverseeocoding (point, title) {
136.  
     console.log(point);
137.  
     this.map.clearMap() //清除地图上所有覆盖物point
138.  
     let marker = new this.AMap.Marker({
139.  
     position: new this.AMap.LngLat(point.lng, point.lat),
140.  
     });
141.  
     this.map.add(marker);//添加点标记
142.  
      
143.  
     // key是高德"web服务"的key
144.  
     let params = {
145.  
     key: '高德"web服务"的key', //!!!一定要申请的是“web服务”的key哈 不然会提示你无效的
146.  
     location: point.lng "," point.lat,
147.  
     }
148.  
     window
149.  
     .$axios({
150.  
     //这个接口本地调用要在vue.config.js 配置一下代理支持跨域 或者让后端做个方向代理的处理我们直接拿后端返回的接口
151.  
     url: "https://restapi.amap.com/v3/geocode/regeo",
152.  
     method: "get",
153.  
     data: params,
154.  
     params
155.  
     })
156.  
     .then(res => {
157.  
     let data = res.data
158.  
     if (data) {
159.  
     let { addressComponent } = data.regeocode
160.  
     let city = addressComponent.city.length != 0 ? addressComponent.city : addressComponent.province;//城市是省直辖县时返回为空 就直接显示省
161.  
     let address = title ? title : addressComponent.streetNumber.street addressComponent.streetNumber.number //街道 门牌号
162.  
     let addString = addressComponent.province city addressComponent.district addressComponent.township
163.  
     this.selectInfo = {
164.  
     addressAll: title ? addString title : addString address,
165.  
     address: address,
166.  
     province: addressComponent.province,
167.  
     city: city,
168.  
     district: addressComponent.district,
169.  
     street: addressComponent.township,
170.  
     }
171.  
     this.showInfo = true
172.  
     this.lngLat = `${point.lng},${point.lat}`
173.  
     this.location = `${this.selectInfo.province},${this.selectInfo.city},${this.selectInfo.district},${this.selectInfo.street}`
174.  
     if (!this.isToStreet) this.location = this.location ',' address
175.  
     }
176.  
     });
177.  
     },
178.  
     getAddress () {
179.  
     this.show_ = false
180.  
     top.window.$bus.$emit(`get-address-map-data${this.emitName ? '-' this.emitName : ''}`, JSON.parse(JSON.stringify(this.selectInfo)))
181.  
     }
182.  
     },
183.  
     mounted () {
184.  
     let self = this;
185.  
     document.addEventListener("keyup", function (e) {
186.  
     if (e.keyCode == 13 ) {
187.  
     self.handleSearch();
188.  
     }
189.  
     });
190.  
     }
191.  
     }
192.  
     </script>

4.style部分

1.  
   <style lang="scss" scoped>
2.  
   ::v-deep .map-wrap {
3.  
   position: relative;
4.  
   .search {
5.  
   width: 410px;
6.  
   margin: 16px 0 0 16px;
7.  
   }
8.  
   .search-result {
9.  
   width: 350px;
10.  
    margin-left: 16px;
11.  
    padding: 10px 0;
12.  
    margin-top: 5px;
13.  
    background: #fff;
14.  
    max-height: 300px;
15.  
    overflow-y: auto;
16.  
    .item {
17.  
    padding: 4px 12px;
18.  
    &:hover {
19.  
    background: #f5f7fa;
20.  
    }
21.  
    i.el-icon-search {
22.  
    margin-top: 3px;
23.  
    font-size: 14px;
24.  
    }
25.  
    .mgr10 {
26.  
    margin-right: 10px;
27.  
    }
28.  
    .title {
29.  
    text-overflow: ellipsis;
30.  
    overflow: hidden;
31.  
    font-size: 14px;
32.  
    padding-bottom: 4px;
33.  
    }
34.  
    .address {
35.  
    line-height: 1;
36.  
    font-size: 12px;
37.  
    color: #b4b4b4;
38.  
    margin-bottom: 5px;
39.  
    }
40.  
    }
41.  
    }
42.  
    .bm-view {
43.  
    height: 400px;
44.  
     
45.  
    .map {
46.  
    width: 100%;
47.  
    height: 100%;
48.  
    }
49.  
    }
50.  
    .search-wrap {
51.  
    position: absolute;
52.  
    top: 0;
53.  
    left: 0;
54.  
    }
55.  
    .input-with-select {
56.  
    width: 410px;
57.  
    .el-input__inner:focus {
58.  
    border-color: #d1d5dc;
59.  
    }
60.  
    }
61.  
    }
62.  
    ::v-deep .BMap_noprint {
63.  
    &.anchorTL {
64.  
    top: 16px !important;
65.  
    right: 16px !important;
66.  
    }
67.  
    }
68.  
    ::v-deep .BMap_cpyCtrl {
69.  
    display: none;
70.  
    }
71.  
    ::v-deep .anchorBL {
72.  
    display: none;
73.  
    }
74.  
    ::v-deep .el-input-group__append,
75.  
    .el-input-group__prepend {
76.  
    background-color: #3788ee;
77.  
    .el-icon-search {
78.  
    color: #fff;
79.  
    font-weight: 600;
80.  
    font-size: 16px;
81.  
    }
82.  
    }
83.  
    #container {
84.  
    width: 750px;
85.  
    height: 400px;
86.  
    }
87.  
    </style>

这篇好文章是转载于：学新通技术网