vue2-client 1.6.34 → 1.6.35

package/src/base-client/components/common/AmapMarker/AmapPointRendering.vue

@@ -1,120 +1,120 @@
-<template >
-  <div id="amap_point_rendering_map" :style="mapStyle">
-    <div v-show="false">
-      <div id="amap_point_rendering_template">
-        <a-descriptions :column="1">
-          <a-descriptions-item v-for="(des, index) in describeList" :key="index" :label="des.describe" >{{ markers[des.field] }}</a-descriptions-item>
-        </a-descriptions>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-import { GetGDMap } from '@vue2-client/utils/map-utils'
-import { mapState } from 'vuex'
-export default {
-  name: 'AmapPointRendering',
-  props: {
-    // 选中点位后需要展示的信息描述
-    describeList: {
-      type: Array,
-      // eslint-disable-next-line vue/require-valid-default-prop
-      default: () => { return [ ] } // lng:描述信息 lat:描述信息对应的值的字段名 { describe: '用户名称', field: 'name' }
-    },
-    // 需要渲染的点位数据
-    markers: {
-      type: String,
-      default: null // lng:经度值 lat:纬度值
-    },
-    // 渲染点位的图片
-    imgurl: {
-      type: String,
-      default: () => {
-        return "https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png"
-      }
-    },
-    mapStyle: {
-      type: Object,
-      default: () => {
-        return {
-          width: '100%',
-          height: '85vh',
-          border: '2px solid lightgray',
-          'border-radius': '5px'
-        }
-      }
-    }
-  },
-  computed: {
-    ...mapState('setting', ['isMobile', 'gaode_key', 'gaode_secret_key'])
-  },
-  data () {
-    return {
-      map: null,
-      geocoder: null, // 逆地理编码
-      infoWindow: null,
-      selectrow: {}
-    }
-  },
-  created () {
-  },
-  mounted () {
-    GetGDMap(this.gaode_secret_key, this.gaode_key).then(aMap => {
-      this.initMap(aMap)
-      this.initData(aMap)
-    })
-  },
-  methods: {
-    initMap (aMap) {
-      this.map = new (aMap).Map('amap_point_rendering_map', { // 设置地图容器id
-        resizeEnable: true, // 是否监控地图容器尺寸变化
-        zoom: 10, // 初始化地图层级
-      })
-      this.geocoder = new (aMap).Geocoder({
-        radius: 500 // 范围，默认：500
-      })
-      this.map.addControl(new (aMap).ToolBar()) // 初始化工具插件
-      // 初始化窗体
-      this.infoWindow = new (aMap).InfoWindow({
-        anchor: 'bottom-center',
-        isCustom: false, // 使用自定义窗体
-        autoMove: true,
-        content: '',
-        showShadow: true,
-        offset: new (aMap).Pixel(0, -25)
-      })
-    },
-    initData (aMap) {
-      // 创建一个 Marker 实例：
-      if (this.markers) {
-        const lngLat = this.markers.split(',')
-        const lng = lngLat[0]
-        const lat = lngLat[1]
-        const marker = new (aMap).Marker({
-          // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
-          position: new (aMap).LngLat(lng, lat),
-          icon: new (aMap).Icon({
-            // 图标大小
-            size: new (aMap).Size(26, 28),
-            imageSize: new (aMap).Size(26, 28),
-            // 报警图标URL
-            image: this.imgurl,
-            // 图标偏移位置
-            anchor: new (aMap).Pixel(0, 0),
-          }),
-          extData: this.markers
-        })
-        marker.on('click', (e) => {
-          if(e.target.getExtData() && e.target.getExtData().lng){
-            this.infoWindow.setContent(document.getElementById('amap_point_rendering_template'))
-            this.infoWindow.open(this.map, [e.target.getExtData().lng, e.target.getExtData().lat])
-          }
-        })
-        // 将创建的点标记添加到已有的地图实例：
-        this.map.add(marker)
-        this.map.setFitView()
-      }
-    }
-  }
-}
-</script>
+<template >
+  <div id="amap_point_rendering_map" :style="mapStyle">
+    <div v-show="false">
+      <div id="amap_point_rendering_template">
+        <a-descriptions :column="1">
+          <a-descriptions-item v-for="(des, index) in describeList" :key="index" :label="des.describe" >{{ markers[des.field] }}</a-descriptions-item>
+        </a-descriptions>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { GetGDMap } from '@vue2-client/utils/map-utils'
+import { mapState } from 'vuex'
+export default {
+  name: 'AmapPointRendering',
+  props: {
+    // 选中点位后需要展示的信息描述
+    describeList: {
+      type: Array,
+      // eslint-disable-next-line vue/require-valid-default-prop
+      default: () => { return [ ] } // lng:描述信息 lat:描述信息对应的值的字段名 { describe: '用户名称', field: 'name' }
+    },
+    // 需要渲染的点位数据
+    markers: {
+      type: String,
+      default: null // lng:经度值 lat:纬度值
+    },
+    // 渲染点位的图片
+    imgurl: {
+      type: String,
+      default: () => {
+        return "https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png"
+      }
+    },
+    mapStyle: {
+      type: Object,
+      default: () => {
+        return {
+          width: '100%',
+          height: '85vh',
+          border: '2px solid lightgray',
+          'border-radius': '5px'
+        }
+      }
+    }
+  },
+  computed: {
+    ...mapState('setting', ['isMobile', 'gaode_key', 'gaode_secret_key'])
+  },
+  data () {
+    return {
+      map: null,
+      geocoder: null, // 逆地理编码
+      infoWindow: null,
+      selectrow: {}
+    }
+  },
+  created () {
+  },
+  mounted () {
+    GetGDMap(this.gaode_secret_key, this.gaode_key).then(aMap => {
+      this.initMap(aMap)
+      this.initData(aMap)
+    })
+  },
+  methods: {
+    initMap (aMap) {
+      this.map = new (aMap).Map('amap_point_rendering_map', { // 设置地图容器id
+        resizeEnable: true, // 是否监控地图容器尺寸变化
+        zoom: 10, // 初始化地图层级
+      })
+      this.geocoder = new (aMap).Geocoder({
+        radius: 500 // 范围，默认：500
+      })
+      this.map.addControl(new (aMap).ToolBar()) // 初始化工具插件
+      // 初始化窗体
+      this.infoWindow = new (aMap).InfoWindow({
+        anchor: 'bottom-center',
+        isCustom: false, // 使用自定义窗体
+        autoMove: true,
+        content: '',
+        showShadow: true,
+        offset: new (aMap).Pixel(0, -25)
+      })
+    },
+    initData (aMap) {
+      // 创建一个 Marker 实例：
+      if (this.markers) {
+        const lngLat = this.markers.split(',')
+        const lng = lngLat[0]
+        const lat = lngLat[1]
+        const marker = new (aMap).Marker({
+          // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
+          position: new (aMap).LngLat(lng, lat),
+          icon: new (aMap).Icon({
+            // 图标大小
+            size: new (aMap).Size(26, 28),
+            imageSize: new (aMap).Size(26, 28),
+            // 报警图标URL
+            image: this.imgurl,
+            // 图标偏移位置
+            anchor: new (aMap).Pixel(0, 0),
+          }),
+          extData: this.markers
+        })
+        marker.on('click', (e) => {
+          if(e.target.getExtData() && e.target.getExtData().lng){
+            this.infoWindow.setContent(document.getElementById('amap_point_rendering_template'))
+            this.infoWindow.open(this.map, [e.target.getExtData().lng, e.target.getExtData().lat])
+          }
+        })
+        // 将创建的点标记添加到已有的地图实例：
+        this.map.add(marker)
+        this.map.setFitView()
+      }
+    }
+  }
+}
+</script>

package/src/base-client/components/common/AmapMarker/index.js

@@ -1,3 +1,3 @@
-import AmapPointRendering from './AmapPointRendering'
-
-export default AmapPointRendering
+import AmapPointRendering from './AmapPointRendering'
+
+export default AmapPointRendering

package/src/pages/exception/404.vue

@@ -1,24 +1,24 @@
-<template>
-  <exception-page :home-route="homePage" :style="`min-height: ${minHeight}`" type="404" />
-</template>
-
-<script>
-import ExceptionPage from '@vue2-client/components/exception/ExceptionPage'
-import { mapState } from 'vuex'
-export default {
-  name: 'Exp404',
-  components: { ExceptionPage },
-  computed: {
-    homePage () {
-      return '/'
-    },
-    ...mapState('setting', ['pageMinHeight']),
-    minHeight () {
-      return this.pageMinHeight ? this.pageMinHeight + 'px' : '100vh'
-    }
-  }
-}
-</script>
-
-<style scoped lang="less">
-</style>
+<template>
+  <exception-page :home-route="homePage" :style="`min-height: ${minHeight}`" type="404" />
+</template>
+
+<script>
+import ExceptionPage from '@vue2-client/components/exception/ExceptionPage'
+import { mapState } from 'vuex'
+export default {
+  name: 'Exp404',
+  components: { ExceptionPage },
+  computed: {
+    homePage () {
+      return '/'
+    },
+    ...mapState('setting', ['pageMinHeight']),
+    minHeight () {
+      return this.pageMinHeight ? this.pageMinHeight + 'px' : '100vh'
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+</style>

package/src/utils/map-utils.js

@@ -1,37 +1,37 @@
-import AMapLoader from '@amap/amap-jsapi-loader'
-let Amap
-async function GetGDMap (secret_key,key) {
-  if (!Amap) {
-    window._AMapSecurityConfig = {
-      securityJsCode: secret_key
-    }
-    Amap = await AMapLoader.load({
-      key: key, // 申请好的Web端开发者Key，首次调用 load 时必填
-      version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
-      plugins: ['AMap.IndexCluster', 'AMP.MarkerCluster', 'AMap.InfoWindow', 'AMap.HeatMap', 'AMap.HawkEye', 'AMap.DistrictSearch',
-        'AMap.ToolBar', 'AMap.Geolocation',
-        'AMap.Geocoder', 'AMap.MarkerClusterer', 'AMap.AutoComplete'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
-      AMapUI: {
-        version: '1.1', // AMapUI 缺省 1.1
-        plugins: [] // 需要加载的 AMapUI ui插件
-      }
-    })
-  }
-  return Amap
-}
-async function GetLocation (address) {
-  return new Promise(async (resolve, reject) => {
-    new (await GetGDMap()).Geocoder({
-      radius: 500 // 范围，默认：500
-    }).getLocation(address, function (status, result) {
-      console.log(result)
-      if (status === 'complete' && result.geocodes.length) {
-        resolve({ lng: result.geocodes[0].location.lng, lat: result.geocodes[0].location.lat })
-      } else {
-        // eslint-disable-next-line prefer-promise-reject-errors
-        reject('根据经纬度查询地址失败')
-      }
-    })
-  })
-}
-export { GetGDMap, GetLocation }
+import AMapLoader from '@amap/amap-jsapi-loader'
+let Amap
+async function GetGDMap (secret_key,key) {
+  if (!Amap) {
+    window._AMapSecurityConfig = {
+      securityJsCode: secret_key
+    }
+    Amap = await AMapLoader.load({
+      key: key, // 申请好的Web端开发者Key，首次调用 load 时必填
+      version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
+      plugins: ['AMap.IndexCluster', 'AMP.MarkerCluster', 'AMap.InfoWindow', 'AMap.HeatMap', 'AMap.HawkEye', 'AMap.DistrictSearch',
+        'AMap.ToolBar', 'AMap.Geolocation',
+        'AMap.Geocoder', 'AMap.MarkerClusterer', 'AMap.AutoComplete'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
+      AMapUI: {
+        version: '1.1', // AMapUI 缺省 1.1
+        plugins: ['misc/PositionPicker'] // 需要加载的 AMapUI ui插件
+      }
+    })
+  }
+  return Amap
+}
+async function GetLocation (address) {
+  return new Promise(async (resolve, reject) => {
+    new (await GetGDMap()).Geocoder({
+      radius: 500 // 范围，默认：500
+    }).getLocation(address, function (status, result) {
+      console.log(result)
+      if (status === 'complete' && result.geocodes.length) {
+        resolve({ lng: result.geocodes[0].location.lng, lat: result.geocodes[0].location.lat })
+      } else {
+        // eslint-disable-next-line prefer-promise-reject-errors
+        reject('根据经纬度查询地址失败')
+      }
+    })
+  })
+}
+export { GetGDMap, GetLocation }