使用百度地图API实现搜索功能

 <!-- 地图 -->
        <Modal
            v-model="mapShow"
            width="1200"
            title="地图"
            @on-ok="editDateSend('formMoudle')"
            @on-cancel="cancel"
        >
            <Row>
                <Col span="18">
                    <div id="mapContainerShow" style="height:500px;width:100%"></div>
                </Col>
                <Col span="6" style="padding:0 10px">
                    <Row>
                        <Col span="24" style="margin-bottom:10px">
                            <label
                                style="width:20%;line-height:32px;float:left;margin-right:10%;text-align:center"
                            >经度：</label>
                            <Input
                                style="width:70%;float:left"
                                v-model="lng"
                                clearable
                                placeholder="请输入经度"
                            />
                        </Col>
                        <Col span="24" style="margin-bottom:10px">
                            <label
                                style="width:20%;line-height:32px;float:left;margin-right:10%;text-align:center"
                            >纬度：</label>
                            <Input
                                style="width:70%;float:left"
                                v-model="lat"
                                clearable
                                placeholder="请输入纬度"
                            />
                        </Col>
                        <Col span="17" offset="7" style="margin-bottom:10px">
                            <Button @click="mapReset">重置</Button>
                            <Button @click="mapSearchL" type="success">搜索</Button>
                        </Col>
                    </Row>
                    <Input
                        v-model="mapVal"
                        @on-change="mapSearch"
                        enter-button
                        size="large"
                        clearable
                        placeholder="请搜索"
                    />
                    <div style="overflow:auto;height:377px">
                        <Row
                            @click="selectMap(item)"
                            v-for="(item,i) in mapResultsData"
                            :key="i"
                            style="padding:10px;border-bottom:1px solid #eee"
                        >
                            <a>
                                <Col span="20">
                                    <p
                                        @click="selectMap(item)"
                                        style="font-size:18px;font-weight:500"
                                    >{{item.title}}</p>
                                    <span
                                        @click="selectMap(item)"
                                        style="font-size:12px;color:#888"
                                    >{{item.address}}</span>
                                </Col>
                                <Col span="4">
                                    <Icon
                                        @click="selectMap(item)"
                                        style="font-size:30px;line-height:48px;color:#888"
                                        type="ios-search"
                                    />
                                </Col>
                            </a>
                        </Row>
                    </div>
                </Col>
            </Row>
        </Modal>


 //地图
        mapSearch(event) {
            this.map.clearOverlays();
            this.local = new BMap.LocalSearch(this.map, {
                renderOptions: { map: this.map }
            });
            this.local.search(this.mapVal);
            //检索结束后的回调方法
            this.local.setSearchCompleteCallback((results) => {
                this.mapResultsData = results.Ir
                this.lat = this.mapResultsData[0].point.lat
                this.lng = this.mapResultsData[0].point.lng
                let point = new BMap.Point(this.lng, this.lat);
                this.map.setCenter(point)
            })
        },

        selectMap(data) {
            this.map.clearOverlays();
            this.local.search(data.title);

            let point = new BMap.Point(data.point.lng, data.point.lat);
            this.map.setCenter(point)

            this.mapVal = data.title
            this.lat = data.point.lat
            this.lng = data.point.lng
        },

        mapReset() {
            this.map.clearOverlays();
            this.lat = ''
            this.lng = ''
        },

        mapSearchL() {
            this.map.clearOverlays();
            let point = new BMap.Point(this.lng, this.lat);
            this.map.setCenter(point)
            this.map.addOverlay(new BMap.Marker(point))
        },