vue-baidu-map 关键字查询

<view class="topSearchBox">
            <van-search
                id="suggestId"
                right-icon=""
                left-icon=""
                placeholder="请输入地址或地块名称查询"
                v-model="keyword"
                @search="onKeyworkSearch"
                shape="round"
                show-action
            >
                <template #action>
                    <div @click="onNameSearch">
                        <svg-icon icon-class="search" class="searchIcon" />
                    </div>
                </template>
            </van-search>
            <view class="searchResultPannel" id="searchResultPannel"></view>
        </view>

<baidu-map
                class="map-contain"
                :scroll-wheel-zoom="true"
                :center="center"
                :zoom="zoom"
                MapType="BMAP_SATELLITE_MAP"
                @ready="mapReady"
                @click="mapClick"
                @moving="syncCenterAndZoom"
                @moveend="syncCenterAndZoom"
                @zoomend="syncCenterAndZoom"
            ></baidu-map>

methods: {
        //地图加载完成
        mapReady({ BMap, map }) {
            var that = this
            this.BMap = BMap
            this.map = map

//创建自动完成对象
            function G(id) {
                return document.getElementById(id)
            }
            var ac = new BMap.Autocomplete({
                input: 'suggestId',
                location: map,
            })
            ac.addEventListener('onhighlight', function(e) {
                //鼠标放在下拉列表上的事件
                var str = ''
                var _value = e.fromitem.value
                var value = ''
                if (e.fromitem.index > -1) {
                    value =
                        _value.province +
                        _value.city +
                        _value.district +
                        _value.street +
                        _value.business
                }
                str =
                    'FromItem<br />index = ' +
                    e.fromitem.index +
                    '<br />value = ' +
                    value

                value = ''
                if (e.toitem.index > -1) {
                    _value = e.toitem.value
                    value =
                        _value.province +
                        _value.city +
                        _value.district +
                        _value.street +
                        _value.business
                }
                str +=
                    '<br />ToItem<br />index = ' +
                    e.toitem.index +
                    '<br />value = ' +
                    value
                G('searchResultPanel').innerHTML = str
            })

            var myValue
            ac.addEventListener('onconfirm', function(e) {
                //鼠标点击下拉列表后的事件
                var _value = e.item.value
                myValue =
                    _value.province +
                    _value.city +
                    _value.district +
                    _value.street +
                    _value.business
                G('searchResultPanel').innerHTML =
                    'onconfirm<br />index = ' +
                    e.item.index +
                    '<br />myValue = ' +
                    myValue

                setPlace()
            })

            function setPlace() {
                map.clearOverlays() //清除地图上所有覆盖物
                function myFun() {
                    var pp = local.getResults().getPoi(0).point //获取第一个智能搜索的结果
                    map.centerAndZoom(pp, 18)
                    map.addOverlay(new BMap.Marker(pp)) //添加标注
                }
                var local = new BMap.LocalSearch(map, {
                    //智能搜索
                    onSearchComplete: myFun,
                })
                local.search(myValue)
            }
},
onItemConfirm(e) {
            var that = this
            var _value = e.item.value
            this.keyword =
                _value.province +
                _value.city +
                _value.district +
                _value.street +
                _value.business
            var map = this.map
            var BMap = this.BMap
            var local = new BMap.LocalSearch(map, {
                onSearchComplete: () => {
                    var res = local.getResults().getPoi(0)
                    var pp = local.getResults().getPoi(0).point //获取第一个智能搜索的结果
                    // debugger
                    // that.map.centerAndZoom(pp, 18)
                    that.center.lat = pp.lat
                    that.center.lng = pp.lng
                },
            })
            local.search(this.keyword)
        },
}