增加农场地址在地图上获取经纬度

xiebin

2022-08-12 206369fe8a0e65d3bbf0b012a3da853d66f76426

增加农场地址在地图上获取经纬度

 package-lock.json

Diff too large

 package.json

@@ -12,6 +12,7 @@
    },
    "dependencies": {
        "@dvgis/dc-sdk": "^2.15.0",
        "avue-plugin-map": "^1.0.1",
        "avue-plugin-ueditor": "^0.1.4",
        "axios": "^0.18.0",
        "babel-polyfill": "^6.26.0",
@@ -32,6 +33,7 @@
        "ol": "^6.5.0",
        "olcs": "^2.12.0",
        "portfinder": "^1.0.23",
        "save": "^2.5.0",
        "script-loader": "^0.7.2",
        "vue": "^2.6.10",
        "vue-axios": "^2.1.2",

 public/index.html

@@ -22,10 +22,21 @@
  <!-- 地图 -->
  <script type="text/javascript" src="js/jquery.min.js"></script>
  <script type="text/javascript" src="js/drawTree.js"></script>


  <script>
    window._AMapSecurityConfig = {
      securityJsCode: '5c569caedb31676fc64da5be4c5e8cee',
    }

  </script>

  <!-- Avue地图选点 -->
  <script type="text/javascript"
    src='https://webapi.amap.com/maps?v=1.4.11&key=7ab53b28352e55dc5754699add0ad862&plugin=AMap.PlaceSearch'></script>
    src='https://webapi.amap.com/maps?v=1.4.11&key=fce315b8c816ec06755a523ccae9922d&plugin=AMap.PlaceSearch'></script>
  <script src="https://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>


  <script src="https://cdn.staticfile.org/FileSaver.js/2014-11-29/FileSaver.min.js"></script>
  <script src="https://cdn.staticfile.org/xlsx/0.18.2/xlsx.full.min.js"></script>
  <link rel="icon" href="<%= BASE_URL %>mg.png">

 src/views/farm/farm.vue

@@ -51,6 +51,8 @@

import { getList, add, update, remove, getDetails } from "@/api/farm/farm"
import { mapGetters } from "vuex"
import AvueMap from 'avue-plugin-map'
Vue.use(AvueMap);

export default {
    components: {
@@ -143,13 +145,17 @@
                    },
                    {
                        label: "农场地址",
                        prop: "farmAddress",
                        rules: [{
                            required: true,
                            message: "请输入农场地址",
                            trigger: "blur"
                        }],
                        prop: "avueMapAddress",
                        type: "map",
                        component: 'avueMap',
                        value: {
                          "formattedAddress": "",
                          "longitude": 0,
                          "latitude": 0
                        },
                        // formslot: true,
                        labelWidth: 145,
                        hide: true,
                        overHidden: true,
                    },
                    {
@@ -160,7 +166,21 @@
                            required: true,
                            message: "请输入农场面积",
                            trigger: "blur"
                        }],
                        }]
                    },
                    {
                        label: "经度",
                        prop: "longitude",
                        disabled: true,
                        hide: true,
                        labelWidth: 145
                    },
                    {
                        label: "纬度",
                        prop: "latitude",
                        disabled: true,
                        hide: true,
                        labelWidth: 145
                    },
                    {
                        label: "口号",
@@ -233,6 +253,19 @@
    },
    created () {
        // this.getRailLazyTree();
    },
    watch: {
        //latitude   longitude   formattedAddress
        "form.avueMapAddress":{
            handler (newObj, oldObj) {
                console.log(newObj,111)
                if (newObj) {
                  this.form.farmAddress = newObj.formattedAddress
                  this.form.latitude = newObj.latitude
                  this.form.longitude = newObj.longitude
                }
            }
        }
    },
    computed: {
        ...mapGetters(["userInfo", "permission", "polygonsFarm"]),
@@ -371,6 +404,12 @@
                getDetails(this.form.id).then((res) => {
                    if (res.data.code == 200) {
                        this.form = res.data.data
                        console.log(this.form,22222)
                        this.form.avueMapAddress = {
                          "formattedAddress": this.form.farmAddress,
                          "longitude": this.form.longitude,
                          "latitude": this.form.latitude
                        }
                        let usePolygons = this.form.position
                            .split("POLYGON((")[1]
                            .split("))")[0]