百度地图添加查询框

最新推荐文章于 2024-04-06 10:52:49 发布

CV猿码人

最新推荐文章于 2024-04-06 10:52:49 发布

阅读量675

点赞数 6

文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/weixin_51722520/article/details/135117056

版权

本文介绍了如何在网页中使用BMapGL库进行地图搜索，包括添加键盘回车监听事件、LocalSearch的使用以及查询后地图的初始化和坐标点显示功能。

摘要由CSDN通过智能技术生成

  <div style="display:inline;float:left;margin: 10px">
            <el-input style="width: 400px" placeholder="输入地点" v-model="area" class="input-with-select"
                      @keyup.enter.native="searchMap">
                <el-button slot="append" icon="el-icon-search" @click="searchMap"></el-button>
            </el-input>
            <el-card style="width: 400px;" v-if="isShow" style="display: flex; align-items: center;">
                <div style="background: white;width: 380px;height: 30px;padding: 5px 0px 5px 0px;"
                     v-for="(item, index) in this.searchFrom">
                    <a style="font-size: 15px;cursor: pointer" @click="search(item)">{{item.title}}</a>
                    <spean style="font-size: 14px;color: grey;margin-bottom: 5px">{{item.address}}</spean>
                </div>
            </el-card>
        </div>

@keyup.enter.native="searchMap" 添加键盘回车监听事件

 //查询
            searchMap() {
                let that = this
                that.isShow = true
                let ls = new BMapGL.LocalSearch(that.map)
                ls.setSearchCompleteCallback((rs) => {
                    this.searchFrom = rs._pois;
                })
                ls.search(this.area);
            },

          //查询后回显
            search(item) {
                this.initMap(item.point.lng, item.point.lat)
                this.isShow = false
                this.area = ''
            }

再次初始化地图，实现地图切换，坐标点显示

initMap(longitude, latitude) {
                let that = this
                let size = 18;
                that.map = new BMapGL.Map("container");// 创建地图实例
                if (longitude == null || latitude == null) {
                    longitude = 111.1480354849708;
                    latitude = 37.5262978563336;
                    size = 16
                }
                let point = new BMapGL.Point(longitude, latitude);
                that.map.centerAndZoom(point, size);      // 初始化地图，设置中心点坐标和地图级别
                that.map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
                this.drawInit()
                this.getEventListener()
            },