# dcat字段扩展：地图拖拽设置xy坐标

**Repository Path**: aoding9/dcat-xy-map

## Basic Information

- **Project Name**: dcat字段扩展：地图拖拽设置xy坐标
- **Description**: dcat字段扩展：地图拖拽设置xy坐标
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2023-08-24
- **Last Updated**: 2023-10-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### 简介

dcat字段扩展：地图拖拽设置xy坐标

参考了dcat自带的map字段组件，将经纬度改为xy坐标，使用vue的双向绑定功能，将marker的left和top定位样式，与xy坐标的input绑定，同时监听了marker的拖拽事件。

![dcat自定义字段，xy坐标拖拽](https://cdn.learnku.com/uploads/images/202308/24/78338/OuxMTeksQA.png!large)

### 使用

1. 下载并复制到根目录，暂时没做composer包

2. 注册扩展：
   在`app/Admin/bootstrap.php`中
```
Form::extend('xyMap', \App\Admin\Extensions\Form\XyMap::class);
```
3. 控制器的form中使用(需要数据库有xy字段)

`$form->xyMap('x','y','坐标');`

4. 设置背景图片和marker图片：

可以替换bg.png，也可以用`->bg($url)`和`->marker($url)`

5. 设置高度：

`->height('400px')`

6. 设置marker动画效果的类名
   `->animateClass()` 不传则禁用动画

### 地址

[gitee仓库](https://gitee.com/aoding9/dcat-xy-map)