dindo-map

基于天地图的地图选择组件，支持地点搜索、位置标注、逆地理编码等功能。

安装

npm install dindo-map

依赖要求

本组件需要以下依赖：

• Vue: ^2.6.0 或 ^3.0.0
• Leaflet: ^1.7.0
• Element UI (可选): 如果使用搜索功能，需要 Element UI 的 el-autocomplete 和 el-input 组件

安装 Leaflet

npm install leaflet

引入 Leaflet CSS

在你的项目中引入 Leaflet 的样式文件：

import 'leaflet/dist/leaflet.css';

使用方法

全局注册

import Vue from 'vue';
import DindoMap from 'dindo-map';
import 'leaflet/dist/leaflet.css';

Vue.use(DindoMap);

局部注册

<template>
  <div>
    <tianditu-map
      :visible="true"
      :initial-position="[116.37304, 39.92594]"
      :show-search="true"
      :tk="yourTiandituKey"
      @location-change="handleLocationChange"
      @address-change="handleAddressChange"
    />
  </div>
</template>

<script>
import { TiandituMap } from 'dindo-map';
import 'leaflet/dist/leaflet.css';

export default {
  components: {
    TiandituMap,
  },
  data() {
    return {
      yourTiandituKey: 'your-tianditu-key',
    };
  },
  methods: {
    handleLocationChange(location) {
      console.log('位置变化:', location);
      // location: { lng, lat, address }
    },
    handleAddressChange(address) {
      console.log('地址变化:', address);
    },
  },
};
</script>

Props

| 参数 | 说明 | 类型 | 默认值 | |------|------|------|--------| | visible | 是否显示组件 | Boolean | true | | initialPosition | 初始经纬度 [lng, lat] | Array | [116.37304, 39.92594] | | showSearch | 是否显示搜索框 | Boolean | true | | readonly | 是否只读模式（纯标注展示，去除手动标注和搜索） | Boolean | false | | disabled | 是否禁用（禁用时不能点击标注） | Boolean | false | | height | 地图高度 | String | '400px' | | tk | 天地图密钥 | String | '37058149a9a118dab5ccbffe7b0ec7dd' | | addressValue | 地址输入框的值（用于双向绑定） | String | '' | | initGeocode | 是否初始化时进行逆地理编码和标记 | Boolean | false |

Events

| 事件名 | 说明 | 回调参数 | |--------|------|----------| | location-change | 位置变化时触发 | { lng, lat, address } | | address-change | 地址变化时触发 | address (String) |

Methods

通过 ref 调用组件方法：

<template>
  <tianditu-map ref="map" />
</template>

<script>
export default {
  methods: {
    getLocation() {
      // 获取当前选中的位置
      const location = this.$refs.map.getLocation();
      console.log(location); // { lng, lat, address }
    },
    setLocation(lng, lat) {
      // 设置位置
      this.$refs.map.setLocation(lng, lat);
    },
    moveToRegion(regionName) {
      // 根据区域名称移动地图
      this.$refs.map.moveToRegion('北京市');
    },
  },
};
</script>

获取天地图密钥

1. 访问 天地图开放平台
2. 注册账号并创建应用
3. 获取 API Key (tk)

注意事项

1. 本组件使用天地图服务，需要有效的天地图密钥
2. 组件依赖 Leaflet，需要确保已正确引入 Leaflet 及其样式
3. 搜索功能依赖 Element UI，如果项目中没有 Element UI，需要自行安装或修改搜索框实现
4. 地图使用 GCJ-02 坐标系（火星坐标系）

License

MIT