地图坐标拾取组件修改

src/components/SimpleAMap/common/utils.js

@@ -0,0 +1,44 @@
+export function initGeocoder() {
+  return new Promise((resolve, reject) => {
+    window.AMap.plugin('AMap.Geocoder', () => {
+      try {
+        const geocoder = new window.AMap.Geocoder({
+          // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
+          city: '全国'
+        })
+        resolve(geocoder)
+      } catch (error) {
+        reject(error)
+      }
+    })
+  })
+}
+
+export function geolocation() {
+  return new Promise((resolve, reject) => {
+    window.AMap.plugin('AMap.Geolocation', () => {
+      const geolocation = new window.AMap.Geolocation({
+        // 是否使用高精度定位，默认：true
+        enableHighAccuracy: true,
+        // 设置定位超时时间，默认：无穷大
+        timeout: 10000,
+        // 定位按钮的停靠位置的偏移量
+        offset: [10, 20],
+        //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
+        zoomToAccuracy: true,
+        //  定位按钮的排放位置,  RB表示右下
+        position: 'RB'
+      })
+
+      geolocation.getCurrentPosition((status, result) => {
+        if (status === 'complete') {
+          resolve(result)
+        } else {
+          reject(result)
+        }
+      })
+    })
+  })
+}
+
+export default {}

src/components/SimpleAMap/index.vue

@@ -0,0 +1,157 @@
+<template>
+  <div id="aMap" class="a-map" />
+</template>
+
+<script>
+import { geolocation, initGeocoder } from './common/utils'
+export default {
+  name: 'AMap',
+  props: {
+    zoom: {
+      type: Number,
+      default: 17
+    },
+    markerIcon: {
+      type: String,
+      default: '/location.png'
+    },
+    center: {
+      type: Boolean,
+      default: false
+    },
+    address: {
+      type: String,
+      default: ''
+    },
+    lnglat: {
+      type: Array,
+      default: null
+    }
+  },
+  data() {
+    return {
+      marker: null,
+      map: null,
+      timer: null,
+      geocoder: null
+    }
+  },
+  methods: {
+    async init() {
+      if (this.lnglat) {
+        console.log('使用经纬度定位')
+        this.initMap(this.lnglat)
+      } else if (this.address) {
+        console.log('使用地址定位')
+        this.initGeocoder()
+      } else {
+        console.log('使用高精度自动定位')
+        this.geolocation()
+      }
+    },
+    // 高精度定位
+    async geolocation() {
+      try {
+        const result = await geolocation()
+        this.$emit('position', {
+          lng: result.position.lng,
+          lat: result.position.lat
+        })
+        this.initMap(result.position)
+      } catch (error) {
+        this.initMap()
+        alert('获取当前位置信息失败，已为您定位到当前城市！')
+        console.log('获取当前位置信息失败，已为您定位到当前城市！')
+      }
+    },
+    // 根据地址信息定位
+    async initGeocoder() {
+      try {
+        this.geocoder = await initGeocoder()
+        this.geocoder.getLocation(this.address, (status, result) => {
+          if (status === 'complete' && result.info === 'OK') {
+            const position = result.geocodes[0].location
+            this.initMap(position)
+            this.$emit('position', {
+              lng: position.lng,
+              lat: position.lat
+            })
+          } else {
+            console.log(result)
+          }
+        })
+      } catch (error) {
+        console.log(error)
+      }
+    },
+    // 初始化地图
+    initMap(position) {
+      this.map = new window.AMap.Map('aMap', {
+        viewMode: '2D', // 默认使用 2D 模式，如果希望使用带有俯仰角的 3D 模式，请设置 viewMode: '3D',
+        zoom: this.zoom, // 初始化地图层级
+        center: position // 初始化地图中心点
+      })
+      this.map.on('click', this.onMapClick)
+      if (position) {
+        this.map.add(this.initMarker(position))
+      }
+      this.initMapControl()
+    },
+    // 初始化标记点
+    initMarker(position) {
+      this.marker = new window.AMap.Marker({
+        icon: this.markerIcon,
+        position,
+        anchor: 'bottom-center',
+        draggable: true
+      })
+      this.marker.on('dragging', this.moveMarker)
+      return this.marker
+    },
+    // 修改标记点
+    onMapClick(map) {
+      if (this.marker) this.map.remove(this.marker)
+      if (this.center) this.map.setCenter(map.lnglat)
+      this.map.add(this.initMarker(map.lnglat))
+      this.$emit('position', {
+        lng: map.lnglat.lng,
+        lat: map.lnglat.lat
+      })
+    },
+    // 标记点移动
+    moveMarker(marker) {
+      if (this.timer) clearTimeout(this.timer)
+      this.timer = setTimeout(() => {
+        if (this.center) this.map.setCenter(marker.lnglat)
+        this.$emit('position', {
+          lng: marker.lnglat.lng,
+          lat: marker.lnglat.lat
+        })
+      }, 200)
+    },
+    // 地图控件
+    initMapControl() {
+      window.AMap.plugin(['AMap.ToolBar', 'AMap.Scale', 'AMap.MapType', 'AMap.Geolocation'], () => {
+        // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
+        this.map.addControl(new window.AMap.ToolBar())
+
+        // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
+        this.map.addControl(new window.AMap.Scale())
+
+        // 在图面添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
+        this.map.addControl(new window.AMap.MapType())
+
+        // 在图面添加定位控件，用来获取和展示用户主机所在的经纬度位置
+        // this.map.addControl(new window.AMap.Geolocation())
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+#aMap {
+  height: 100%;
+  min-height: 400px;
+}
+</style>