百度地图可搜索可点击

最新推荐文章于 2024-12-03 10:43:27 发布

原创最新推荐文章于 2024-12-03 10:43:27 发布 · 221 阅读

CC 4.0 BY-SA版权

本文介绍了一个使用Vue.js和百度地图API实现的地图应用案例，该应用具备输入地址后自动定位的功能，并能通过点击地图来获取坐标信息。文章涵盖了如何在前端页面中集成百度地图，设置地图的基本属性如缩放级别和中心点，以及通过地址搜索和点击事件来更新地图标记。

<template>
  <div class="app-container">
    <el-autocomplete
      v-model="mapLocation.address"
      :fetch-suggestions="querySearch"
      placeholder="请输入详细地址"
      style="width: 100%"
      :trigger-on-focus="false"
      @select="handleSelect"
    />
    <div style="margin: 5px">
      <baidu-map
        class="bm-view"
        :center="mapCenter"
        :zoom="mapZoom"
        :scroll-wheel-zoom="true"
        @click="searchHandle"
        @ready="handlerBMap"
      />
    </div>
  </div>
</template>
 
<script>
export default {
  name: "BaiduMapDemo",
  components: {},
  data() {
    return {
      mapZoom: 15,
      mapCenter: { lng: 0, lat: 0 },
      mapLocation: {
        address: null,
        coordinate: undefined,
      },
    };
  },
  methods: {
    searchHandle(e) {
      this.map.clearOverlays();
      this.map.addOverlay(new this.BMap.Marker(e.point));
      let geocoder= new BMap.Geocoder(); 
      geocoder.getLocation(e.point, rs => {
        console.log(rs);
        this.mapLocation.address = rs.address;
        this.mapLocation.coordinate = rs.point;
      });
    },
    handlerBMap({ BMap, map }) {
      this.BMap = BMap;
      this.map = map;
      if (this.mapLocation.coordinate && this.mapLocation.coordinate.lng) {
        this.mapCenter.lng = this.mapLocation.coordinate.lng;
        this.mapCenter.lat = this.mapLocation.coordinate.lat;
        this.mapZoom = 15;
        map.addOverlay(new this.BMap.Marker(this.mapLocation.coordinate));
        console.log(this.mapLocation);
      } else {
        this.mapCenter.lng = 113.271429;
        this.mapCenter.lat = 23.135336;
        this.mapZoom = 10;
      }
    },
    querySearch(queryString, cb) {
      var that = this;
      var myGeo = new this.BMap.Geocoder();
      myGeo.getPoint(
        queryString,
        function (point) {
          if (point) {
            that.mapLocation.coordinate = point;
            that.makerCenter(point);
          } else {
            that.mapLocation.coordinate = null;
          }
        },
        this.locationCity
      );
      var options = {
        onSearchComplete: function (results) {
          if (local.getStatus() === 0) {
            // 判断状态是否正确
            var s = [];
            for (var i = 0; i < results.getCurrentNumPois(); i++) {
              var x = results.getPoi(i);
              var item = { value: x.address + x.title, point: x.point };
              s.push(item);
              cb(s);
            }
          } else {
            cb();
          }
        },
      };
      var local = new this.BMap.LocalSearch(this.map, options);
      local.search(queryString);
    },
    handleSelect(item) {
      var { point } = item;
      this.mapLocation.coordinate = point;
      this.makerCenter(point);
      console.log(this.mapLocation);
    },
    makerCenter(point) {
      if (this.map) {
        this.map.clearOverlays();
        this.map.addOverlay(new this.BMap.Marker(point));
        this.mapCenter.lng = point.lng;
        this.mapCenter.lat = point.lat;
        this.mapZoom = 15;
      }
    },
  },
};
</script>

<style>
.bm-view {
  width: 100%;
  height: 500px;
}
</style>