# kong-tian

> ```js import TianMap from "kong-tian"; // 包名 import "kong-tian/tianmap.css"; Vue.use(TianMap); ```

Latest version **1.0.2** (published 2022-11-11) · ISC license · 0 weekly downloads

## Install

```sh
npm install kong-tian
pnpm add kong-tian
yarn add kong-tian
bun add kong-tian
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2022-11-11 |
| First published | 2022-11-11 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 441.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | 15216547879@163.com |
| Maintainers | kongxw |
| Keywords | 天地图标记边界范围, vue天地图, 天地图边界 |

## Links

- npm: https://www.npmjs.com/package/kong-tian
- npm.io page: https://npm.io/package/kong-tian

## Recent versions

- 1.0.2 (latest) — 2022-11-11
- 1.0.1 — 2022-11-11
- 1.0.0 — 2022-11-11

## README

## 组件封装在弹窗内,用于新增/编辑页面

# main.js

```js
import TianMap from "kong-tian"; // 包名
import "kong-tian/tianmap.css";
Vue.use(TianMap);
```

## 1 首选,在列表页引入组件

```bash
# 获取天地图页面使用
<template>
#标记范围
<tian-Map ref="tianArea" @getLongLatArea="getLongLatArea" long="118.362881" lat="35.109849"></tian-Map>
#long="118.362881" lat="35.109849" 为默认值
</template>

<script>
export default{
    data(){
        return {

        }
    },
    methods:{
        # //点击确定的回调函数,data为边界数据
        getLongLatArea(data){
			console.log(data.length)
		},
		openMap(data) {
			#// data 打开时赋值边界范围
			#// this.$refs.tianArea.openMapAreaDetail(data);
			#// 也可以 没有默认值
			this.$refs.tianArea.openMapAreaDetail();
		},
    }

}
</script>
```

## 2 其次,在新增/编辑页面

```bash
<template>
        <el-form-item style="width:100%;" label="经纬度">
            <el-input v-model="villageForm.long_lat" class="item_input" disabled />
            <el-button type="primary" size="mini" style="margin-left:20px;" @click="openMap(villageForm.long_lat)">选取经纬度</el-button>
        </el-form-item>
        <el-form-item style="width:100%;" label="边界范围">
            <el-input v-model="villageForm.area_long_lat" class="item_input" v-show="!villageForm.area_long_lat" disabled />
            <el-button type="primary" size="mini" style="margin-left:20px;" v-show="villageForm.area_long_lat" @click="toMark(villageForm.area_long_lat)">已标记</el-button>
            <el-button type="primary" size="mini" style="margin-left:20px;" v-show="!villageForm.area_long_lat" @click="toMark(villageForm.area_long_lat)">请标记范围</el-button>
        </el-form-item>
</template>

<script>
export default{
    data(){
        return {
            villageForm:{
                long_lat:'',//经纬度
                area_long_lat:'',//范围
            }

        }
    },
    methods: {
        # 经纬度------------------
        # // 打开地图弹窗
        openMap(data) {
            this.$refs.tianLnglat.openMapLnglatDetail(data)
        },
        # // 标记完成后,接收经纬度
        getLongLat(obj) {
            this.villageForm.long_lat = obj
        },
        # 边界范围----------------
        # // 标记边界范围,
        toMark(data) {
            this.$refs.tianArea.openMapAreaDetail(data);
        },
        # // 标记完成后 接收边界范围
        getLongLatArea(obj) {
            this.villageForm.area_long_lat = obj
        
        },
    },
}
</script>
```

---
_Source: https://npm.io/package/kong-tian · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._