333

schangxiang@126.com

2025-09-19 18966e02fb573c7e2bb0c6426ed792b38b910940

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<template>
  <div class="page-list-container">
    <!--数据Table-->
    <yrt-data-list :ref="dataListRef" :editor-ref="editorRef" :data-options="dataOptions" :fields.sync="dataListOptions.fields" :buttons="dataListOptions.buttons" :button-click="buttonClick" :data-list-selections.sync="dataListSelections" :auth-nodes="authNodes">
    </yrt-data-list>
 
    <!--数据编辑器Editor-->
    <yrt-editor :ref="editorRef" :data-list-ref="dataListRef" v-bind="editorOptions" :data-options="dataOptions" :action.sync="editorOptions.action" :top.sync="editorOptions.top" :visible.sync="editorOptions.config.visible" :auth-nodes="authNodes" @on-add-load-after="onEditLoadAfter" @on-edit-load-after="onEditLoadAfter">
      <div slot="blank-baiduMap">
        <baidu-map :zoom="map.zoom" :center="map.center" :ak="map.ak" :scroll-wheel-zoom="true" class="map" @ready="handler" @click="getLocationPoint">
          <bm-navigation anchor="BMAP_ANCHOR_TOP_LEFT"></bm-navigation>
          <bm-city-list :offset="{width:100,height:10}" anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-city-list>
        </baidu-map>
      </div>
    </yrt-editor>
 
  </div>
</template>
<script>
import baseLayout from "@/components/common/base-layout.vue";
import BaiduMap from "vue-baidu-map/components/map/Map.vue";
import { BmNavigation } from "vue-baidu-map"; // 缩放
import { BmCityList } from "vue-baidu-map"; // 城市列表
 
export default {
  name: "basicInfo-base-park",
  components: {
    BaiduMap,
    BmNavigation,
    BmCityList
  },
  mixins: [baseLayout],
  data() {
    return {
      // 百度地图map
      map: {
        ak: "TUmein8FPXVTwK89LMnDEntYFctQb70b",
        zoom: 10, // 控制地图显示的城市大小
        center: { lng: 0, lat: 0 },
        address: null
      },
      BMap: null
    };
  },
  methods: {
    // 百度地图渲染，不可缺少
    handler({ BMap, map }) {
      this.BMap = BMap;
      this.map.center = { lng: 116.404, lat: 39.915 };
      this.map.zoom = 10;
    },
    // click事件
    getLocationPoint(e) {
      const BMap = this.BMap;
      this.editor.changeValue("lng", e.point.lng);
      this.editor.changeValue("lat", e.point.lat);
      // 用所定位的经纬度查找所在地省市街道等信息
      var point = new BMap.Point(e.point.lng, e.point.lat);
      var gc = new BMap.Geocoder();
      const _this = this;
      gc.getLocation(point, function(rs) {
        _this.map.address = rs.address;
        // console.log(rs.addressComponents); // 地址信息
        // console.log(rs.address);
      });
      if (this.map.address) {
        this.editor.changeValue("mapAddress", this.map.address);
      }
    },
    // 页面加载后
    onEditLoadAfter() {}
  }
};
</script>
 
<style lang="scss" scoped>
.page-list-container {
  min-height: calc(100vh - 110px);
  overflow: hidden;
  position: relative;
}
 
@media screen and (max-height: 900px) {
  .page-list-container {
    min-height: 600px;
  }
}
/* The container of BaiduMap must be set width & height. */
.map {
  width: 100%;
  height: 500px;
}
</style>