VUE2.0百度在线地图及搜索地址

小圆圆Today

已于 2022-05-27 10:49:29 修改

阅读量834

点赞数 3

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

于 2022-05-14 15:04:57 首次发布

本文链接：https://blog.csdn.net/qq_41068030/article/details/124768286

本文介绍了如何在Vue.js应用中集成百度地图插件vue-baidu-map，实现地图初始化、地址搜索、点击获取经纬度等功能。通过引入插件、设置组件、监听事件，展示了从搜索地址到选择结果并更新地图中心点的完整过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、下载地图插件 npm install vue-baidu-map

2、引入百度地图插件 import BaiduMap from 'vue-baidu-map/components/map/Map.vue'

3、在html中使用

 <div style="text-align: center">
        <div :class="baseFormStyle.locationBox">
          <div  style="width: 200px;position: absolute; left: 60px;top: 10px;z-index:100 !important;">
            <a-input-search
              placeholder="请输入地名"
              id="searchIn"
              @search="searchAddress"
              @clear="searchAddress"
              @focus="focusClick"
              clearable
              search
              style="width: 200px; ">
            </a-input-search>
            <div v-show="showResultFlag" :class="baseFormStyle.searchResultBox">
              <happy-scroll resize >
                <div  :class="baseFormStyle.searchResult">
                  <div v-for="(item, index) in searchResult" :class="baseFormStyle.item" :key="index" @click="handleSelect(item)">
                    <p :class="baseFormStyle.title">{{ item.title }}</p>
                    <p :class="baseFormStyle.address">{{ item.address }}</p>
                  </div>
                </div>
              </happy-scroll>
            </div>
          </div>
          <baidu-map
            id="allmap"
            :class="baseFormStyle.allmap"
            ak="您的秘钥"
            :center="mapCenter"
            :zoom="mapZoom"
            :scroll-wheel-zoom="true"
            @ready="mapReady">
          </baidu-map>
        </div>
      </div>

4、js中使用地图初始化

  //地图初始化
        mapReady({ BMap, map }) {
            let that = this;
            this.BMap = BMap;
            this.baseForm.locationLatitude = 113.43097;
            this.baseForm.locationLongitude = 23.092506;
            this.map = map;
            this.point = new this.BMap.Point( this.baseForm.locationLatitude, this.baseForm.locationLongitude);
            this.mapCenter.lng =  this.baseForm.locationLatitude;
            this.mapCenter.lat = this.baseForm.locationLongitude;
            this.tempData.locationLatitude =  this.baseForm.locationLatitude;
            this.tempData.locationLongitude = this.baseForm.locationLongitude;
            // 选择一个经纬度作为中心点
            this.map.centerAndZoom(this.point, 12);
            let marker = new this.BMap.Marker(this.point);        // 创建标注
            this.map.addOverlay(marker);                     // 将标注添加到地图中
            this.map.addControl(new this.BMap.NavigationControl());
            this.zoom = 15;
            map.addEventListener("click", function(e){
                that.tempData.locationLatitude = e.point.lng;
                that.tempData.locationLongitude = e.point.lat;
            });
        },

5、搜索地址关键词

  //搜索地址
        searchAddress(data = ''){
          console.log('data',data)
            if(!data || this.tempData.searchKeyWord === data){
                data = ''; return;
            }
            this.tempData.searchKeyWord = data;
            let map = this.map;
            let that = this;
            that.showResultFlag = true;
            let local =  new this.BMap.LocalSearch(map,{
                renderOptions:
                    {map: map,  autoViewport: true, selectFirstResult: false  },
                onMarkersSet:function (array) {
                    console.log(array);
                },
                onInfoHtmlSet:function (LocalResultPoi) {
                    console.log(LocalResultPoi);
                },
                onResultsHtmlSet:function (element) {
                    console.log(element);
                }
                ,onSearchComplete: function(res){
                    console.log("results",res)
                    if (res && res.Kr) {
                        that.searchResult = [...res.Kr]
                    }
                }
            });
            local.search(data)
        },

6、选择下拉结果

// 选择下拉
        handleSelect(item) {
            let that = this;
            let title = item.title;
            let { lng, lat } = item.marker.point;
            let point = new that.BMap.Point(lng, lat);
            let geoc = new that.BMap.Geocoder();
            that.tempData.locationLatitude = lng;
            that.tempData.locationLongitude = lat;
            geoc.getLocation(point, function (res) {
                that.showResultFlag = false;
                that.map.clearOverlays(); //清除地图上所有覆盖物
                that.map.addOverlay(new that.BMap.Marker({ lng, lat }));
                that.mapCenter.lng = lng;
                that.mapCenter.lat = lat;
                that.mapZoom = 15;
            })
        },

7、效果如下