初始化代码

uniapp/uni-admin/src/components/basics/lbMap.vue

@@ -0,0 +1,173 @@
+<template>
+  <el-dialog
+    title="获取经纬度"
+    :visible.sync="centerDialogVisible"
+    width="600px"
+    center
+    :append-to-body="true"
+  >
+    <div class="dialog-inner">
+      <div class="map-search">
+        <el-input placeholder="输入地址" v-model="address"></el-input>
+        <lb-button size="mini" type="primary" @click="searchMapAddr"
+          >搜 索</lb-button
+        >
+      </div>
+      <div id="container"></div>
+    </div>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="centerDialogVisible = false">{{
+        $t('action.cancel')
+      }}</el-button>
+      <el-button type="primary" @click="confirmLatLng">{{
+        $t('action.comfirm')
+      }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  props: {
+    dialogVisible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+      centerDialogVisible: false,
+      map: null,
+      info: null,
+      address: '',
+      marker: '',
+      geocoder: null,
+      latLng: {
+        lat: 30.657535,
+        lng: 104.065783
+      }
+    }
+  },
+  methods: {
+    initMap () {
+      let that = this
+      let { lat, lng } = this.latLng
+      // 中心坐标
+      // eslint-disable-next-line no-undef
+      let center = new qq.maps.LatLng(lat, lng)
+      // eslint-disable-next-line no-undef
+      let map = new qq.maps.Map(
+        document.getElementById('container'),
+        {
+          center: center,
+          zoom: 12
+        }
+      )
+      that.map = map
+      // eslint-disable-next-line no-undef
+      that.info = new qq.maps.InfoWindow({
+        map: map
+      })
+      // eslint-disable-next-line no-undef
+      qq.maps.event.addListener(map, 'click', async function (val, el) {
+        if (that.marker) { that.marker.setMap(null) }
+        let { lat, lng } = val.latLng
+        that.latLng = val.latLng
+        // eslint-disable-next-line no-undef
+        that.marker = new qq.maps.Marker({
+          // 标记的位置
+          // eslint-disable-next-line no-undef
+          position: new qq.maps.LatLng(lat, lng),
+          map: map
+        })
+        that.info.open()
+        that.info.setContent(`<div style="margin:10px;">
+        <p>纬度：${lat}</p>
+        <p>经度：${lng}</p>
+        </div>`)
+        // eslint-disable-next-line no-undef
+        that.info.setPosition(new qq.maps.LatLng(lat, lng))
+      })
+    },
+    openQQMap () {
+      setTimeout(() => {
+        this.initMap()
+        this.initGeocoder()
+      }, 500)
+    },
+    /**
+     * @method 根据位置搜索坐标
+     */
+    searchMapAddr () {
+      let { address } = this
+      this.geocoder.getLocation(address)
+    },
+    initGeocoder () {
+      let that = this
+      // eslint-disable-next-line no-undef
+      that.geocoder = new qq.maps.Geocoder()
+      // 设置服务请求成功的回调函数
+      that.geocoder.setComplete(function (result) {
+        let { lat, lng } = result.detail.location
+        that.latLng = result.detail.location
+        that.map.setCenter(result.detail.location)
+        // eslint-disable-next-line no-undef
+        that.marker = new qq.maps.Marker({
+          map: that.map,
+          position: result.detail.location
+        })
+        that.info.open()
+        that.info.setContent(`<div style="margin:10px;">
+        <p>纬度：${lat}</p>
+        <p>经度：${lng}</p>
+        </div>`)
+        // eslint-disable-next-line no-undef
+        that.info.setPosition(new qq.maps.LatLng(lat, lng))
+      })
+      // 若服务请求失败，则运行以下函数
+      that.geocoder.setError(function () {
+        that.$message.error('请输入包含市级的地址！')
+      })
+    },
+    /**
+     * @method 确定经纬度
+     */
+    confirmLatLng () {
+      this.centerDialogVisible = false
+      this.$emit('selectedLatLng', this.latLng)
+    }
+  },
+  watch: {
+    dialogVisible (newValue, oldValue) {
+      if (newValue) {
+        this.centerDialogVisible = true
+        this.openQQMap()
+      }
+    },
+    centerDialogVisible (val) {
+      if (!val) {
+        this.$emit('update:dialogVisible', false)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+#container {
+  width: 500px;
+  height: 400px;
+  margin: 0 auto;
+}
+.dialog-inner {
+  .map-search {
+    display: flex;
+    justify-content: center;
+    margin-bottom: 20px;
+    .el-input {
+      width: 300px;
+      margin-right: 10px;
+    }
+  }
+}
+</style>