在 Vue 中使用百度地图实现打点获取经纬度等

最新推荐文章于 2024-03-29 14:35:25 发布

如果有了可惜

最新推荐文章于 2024-03-29 14:35:25 发布

阅读量1.9k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： Vue

本文链接：https://blog.csdn.net/jufjzq/article/details/115947712

Vue 专栏收录该内容

24 篇文章

订阅专栏

本文介绍如何在Vue项目中集成百度地图服务，包括安装配置、组件注册及使用示例。通过封装自定义组件实现地图功能，如点击获取经纬度、搜索地点等。

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

1. 安装

npm i vue-baidu-map -S

点击查看官方文档

2. 注册组件

main.js

// 全局注册百度地图组件

import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, { ak: 'your_ak' }) // 自行申请

// 按需引入
根据官方文档来

3. 封装组件

src/component/Map.vue

实现一个简单 demo， css 自己写

<template>
  <div class="map-wrapper">
    <input type="text" v-model="mapSearchConfig.keyword" />
    <baidu-map v-bind="mapConfig" v-on="bindMapEvent">
      <bm-local-search v-bind="mapSearchConfig"></bm-local-search>
    </baidu-map>
    <div class="map-info">
      <div class="map-address">{{ markerPo.address }}</div>
      <div class="lng-lat" v-if="markerPo.lng">
        <div>经度：{{ markerPo.lng.toFixed(5) }}</div>
        <div>纬度：{{ markerPo.lat.toFixed(5) }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TheMap',
  data() {
    return {
      map: undefined, // map 实例
      mapConfig: {
        center: { lng: 119.98, lat: 30.548 }, // 初始位置
        zoom: 14, // 缩放等级
        scrollWheelZoom: true, // 允许滚轮缩放地图
        style: 'height:200px; width:500px;',
      },
      /* v-on="{ }" 使用对象语法时不支持任何修饰器 */
      bindMapEvent: {
        rightclick: this.getClickInfo,
        ready: this.onBMapReady,
      },
      mapSearchConfig: {
        keyword: '',
        location: '德清', // 搜索范围
        panel: false, // 是否展开自带搜索结果面板
        autoViewport: true, // 搜索后自动跳转视角
      },
      //点击过后获取的地址信息
      markerPo: {
        address: '请于地图上右击鼠标选择具体位置！',
      },
      marker: null, // 标记点
    };
  },
  props: {
    value: { type: String, default: '' }, // 获取后端数据中已存在的点位信息
  },
  watch: {
    value() {
      this.initData();
    },
  },
  methods: {
    initData() {
      if (!this.map || !this.value) {
        return;
      }
      const arr = this.value.split(',');
      if (arr.length === 3) {
        const [address, lng, lat] = arr;
        this.mapConfig.center = { lng, lat };
        this.markerPo = { address, lng, lat };
        this.addMarker(this.markerPo);
      }
    },
    onBMapReady({ map }) {
      this.map = map;
      this.initData();
    },
    getClickInfo(e) {
      // 反编码通过点击经纬度获取地名地址
      let geoCoder = new BMap.Geocoder();
      geoCoder.getLocation(e.point, res => {
        const { address, business, point } = res;
        this.markerPo = {
          address: `${address} ${business ? `(${business})` : ''}`,
          ...point,
        };
        this.addMarker(this.markerPo);

        /* 下边的代码只取结果第一个会导致一片地方可能始终只有一个经纬度和点位 */

        // 获取地名
        // let current_point = {};
        // current_point = res.surroundingPois.length
        //   ? res.surroundingPois[0]
        //   : res;
        // const { address, title } = current_point;
        // const addressName = `${title ? title + ' (' : ''}${address}${
        //   title ? ')' : ''
        // }`;
        // this.markerPo = {
        //   ...current_point.point,
        //   address: addressName,
        // };
        // this.addMarker(this.markerPo);
        // this.$emit(
        //   'input',
        //   `${address},${current_point.point.lng},${current_point.point.lat}`,
        // );
      });
    },
    addMarker(data) {
      // 移除地图上所有点
      this.marker && this.map.removeOverlay(this.marker);

      // const point = new BMap.Point(data.lng, data.lat);
      // this.marker = new BMap.Marker(point); // 创建标注

      this.marker = new BMap.Marker(data); // 创建标注
      this.map.addOverlay(this.marker); // 将标注添加到地图中
    },
  },
};
</script>