vue百度地图实现下拉匹配地址并给选中项添加标注、定位

智慧的牛

于 2024-03-19 13:05:02 发布

阅读量413

点赞数 2

文章标签： vue.js 前端 javascript 地图

本文链接：https://blog.csdn.net/guzhangyu12345/article/details/136836759

版权

效果图

安装npm依赖

npm install vue-baidu-map

页面代码

新建页面test.vue

<template>
  <baidu-map class="bm-view" scroll-wheel-zoom :center="location" :zoom="zoom" ak="xx" @ready="mapReady">
    <bm-view class="map"></bm-view>
    <bm-control :offset="{width: '50px', height: '10px'}">
      <el-input v-model="inputValue" id="suggestId"></el-input>
    </bm-control>

    <bm-navigation anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-navigation>
  </baidu-map>
</template>

<script>

  import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
  import BmView from 'vue-baidu-map/components/map/MapView.vue'
  import BmLocalSearch from 'vue-baidu-map/components/search/LocalSearch.vue'
  import BmNavigation from 'vue-baidu-map/components/controls/Navigation'
  import BmMarkerClusterer from 'vue-baidu-map/components/extra/MarkerClusterer'
  import BmMarker from 'vue-baidu-map/components/overlays/Marker'
  import BmInfoWindow from 'vue-baidu-map/components/overlays/InfoWindow'
  import BmAutoComplete from 'vue-baidu-map/components/others/AutoComplete'
  import BmControl from 'vue-baidu-map/components/controls/Control'

  export default {
    components: {
      BaiduMap, BmView, BmLocalSearch, BmNavigation, BmMarkerClusterer, BmMarker, BmInfoWindow, BmAutoComplete, BmControl
    },
    data() {
      return {
          geocoder: null,
          model: {},
          BMap: {},
          map: {},
          location: {
            lng: 113.93588,
            lat: 22.74894
          },
          zoom: 16,
          inputValue: "",
          keyword: ''
      }
    },
    methods: {
        mapReady ({BMap, map}) {
            this.BMap = BMap;
            this.map = map;
            this.geocoder = new BMap.Geocoder(); //创建地址解析器的实例
            this.map.centerAndZoom(new BMap.Point(113.93588, 22.74894), 14);

            const that = this
            //建立一个自动完成的对象
            var ac = new BMap.Autocomplete({
              "input" : "suggestId",
              "location" : this.map
            });

            // 鼠标点击下拉列表
            ac.addEventListener("onconfirm", function(e) {
              var v = e.item.value;
              var keyword = v.province +  v.city +  v.district +  v.street + v.business;

              //清除地图上所有覆盖物
              that.map.clearOverlays();

              //智能搜索
              var local = new BMap.LocalSearch(that.map, {
                onSearchComplete: function (){
                  var p = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
                  that.map.centerAndZoom(p, 16);
                  that.map.addOverlay(new BMap.Marker(p));    //添加标注
                }
              });
              local.search(keyword);
            });

            // 点击百度地图上的搜索出来的红色标记点
            map.addEventListener("click", ({ point }) => {
              this.location.lng = point.lng;
              this.location.lat = point.lat;
              this.geocoder.getLocation(point, res => {
                this.inputValue = res.address;
                this.model.address = res.address;
                this.model.storeLongitude = point.lng
                this.model.storeLatitude = point.lat
                this.$forceUpdate();
              });
            });
        }
    }
  }
</script>

<style lang="scss">
  .map {
    width: 100%;
    height: 100%;
    flex: 1;
  }

  .address_wrap{
    width: 100%;
    height: 100%;
    ::v-deep{
      .bm-view {
        display: block;
        width: 100%;
        height: 100%;
        .BMap_noprint.anchorTL{
          width: 22%;
          top: 10px !important;
          left: 10px !important;
        }
      }
    }
  }

  .bm-view {
    display: block;
    width: 100%;
    height: 100%;
    .BMap_noprint.anchorTL{
      width: 22%;
      top: 10px !important;
      left: 10px !important;
    }
  }
</style>

其中baidu-map组件中的ak参数需要在百度地图开放平台新建应用获得。