地图定位组件 && map服务类

package.json

@@ -39,6 +39,7 @@
     "vue-i18n": "^8.15.5",
     "vue-property-decorator": "^8.3.0",
     "vuedraggable": "^2.24.1",
+    "vue-amap": "^0.5.10",
     "vue-router": "^3.1.5",
     "vue-touch": "^2.0.0-beta.4",
     "vuex": "^3.1.2"

src/app-register.ts

@@ -142,5 +142,7 @@ export const AppComponents = {
         v.component('app-mob-menu-sideslip-view',() => import('@/components/app-mob-menu-sideslip-view/app-mob-menu-sideslip-view.vue'));
         // 动作面板
         v.component('app-mob-actionsheet',() => import('@/components/app-mob-actionsheet/app-mob-actionsheet.vue'));
+        // 地图定位
+        v.component('app-mob-map',() => import('@/components/app-mob-map/app-mob-map.vue'));
     },
 };
\ No newline at end of file

src/components/app-mob-map/app-mob-map.less

+.app-mob-map {
+  .app-map {
+    width: 100vw;
+    height: calc(100vh - 76px) !important;
+  }
+  .addressText {
+    text-align: center;
+    font-size: 12px;
+    color: #333;
+    height: 32px;
+    overflow: hidden;
+  }
+//   去除logo
+  .amap-logo {
+    display: none !important;
+  }
+  .amap-copyright {
+    display: none !important;
+  }
+}

src/components/app-mob-map/app-mob-map.vue

+<template>
+      <div class="app-mob-map">
+        <div class="addressText">地址详情：{{addressText}}</div>
+        <el-amap   vid="amap" :plugin="plugin"  ref="map"  class="app-map" ></el-amap>
+      </div>
+</template>
+<script lang="ts">
+import { Vue, Component, Prop, Provide, Emit, Watch, } from "vue-property-decorator";
+import { MapService } from '@/ibiz-core/service/map-service';
+@Component({
+    components: {},
+})
+export default class AppMobMap extends Vue {
+
+    /**
+     * 地图服务
+     *
+     */
+    public mapService: MapService = MapService.getInstance();
+
+    /**
+     * 位置文本
+     *
+     */
+    public addressText = "";
+
+    /**
+     * 经纬坐标
+     *
+     */
+    public center: any = [];
+
+    //地图配置
+    public plugin = [{
+        maximumAge: 0,           //定位结果缓存0毫秒，默认：0
+        buttonPosition: 'RB',    //定位按钮停靠位置，默认：'LB'，左下角
+        //定位成功后将定位到的位置作为地图中心点，默认：true
+        zoomToAccuracy: true,     //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：f
+        extensions: 'all',
+        pName: 'Geolocation',
+        events: {
+            init: (o: any) => {
+              let _this = this;
+                // o 是高德地图定位插件实例
+                o.getCurrentPosition((status: any, result: any) => {
+                    if (result && result.position) {
+                        this.center = [result.position.lng, result.position.lat];
+                        // 获取地址信息
+                        this.geocoder(this.center)
+                    }
+                });
+            }
+        }
+    }]
+  /**
+   * geocoder
+   */
+  public geocoder(center:any) {
+    this.mapService.geocoder(center).then((res: any) => {
+      this.addressText = res.formattedAddress;
+    }) .catch((error: any) => {
+        console.log(error);
+      });;
+  }
+
+}
+</script>
+<style lang="less">
+@import "./app-mob-map.less";
+</style>
\ No newline at end of file

src/ibiz-core/service/map-service.ts

+import VueAMap from "vue-amap";
+
+/**
+ * 地图服务
+ *
+ * @export
+ * @class MapService
+ */
+export class MapService {
+
+    /**
+     * 唯一实例
+     *
+     * @private
+     * @static
+     * @memberof MapService
+     */
+    private static readonly instance = new MapService();
+
+    /**
+     * 地图sdk
+     *
+     * @memberof MapService
+     */
+    public readonly map = (window as any).AMap;
+
+    /**
+     * 地图是否已经初始化
+     *
+     * @private
+     * @type {boolean}
+     * @memberof MapService
+     */
+    private $isInit: boolean = false;
+    /**
+     * 是否已经初始化
+     *
+     * @type {boolean}
+     * @memberof MapService
+     */
+    public get isInit(): boolean {
+        return this.$isInit;
+    }
+
+    /**
+     * Creates an instance of MapService.
+     * @memberof MapService
+     */
+    private constructor() {
+        if (MapService.instance) {
+            return MapService.instance;
+        }
+        this.init();
+    }
+
+    /**
+     * 获取实例
+     *
+     * @static
+     * @returns {MapService}
+     * @memberof MapService
+     */
+    public static getInstance(): MapService {
+        return MapService.instance;
+    }
+
+    public  getAMap(): any {
+        let _window:any = window;
+        return _window.AMap;
+    }
+
+    private init() {
+        VueAMap.initAMapApiLoader({
+            key: "6e350f60986cba316719fdc7bd55d8d3",
+            plugin: [
+              "AMap.Geocoder",
+              "AMap.Geolocation" 
+            ],
+          })
+          this.$isInit = true;
+    }
+    
+    /**
+     * 通过经纬度获取位置详情
+     */
+    public geocoder(lng:[]):Promise<any>{
+        return new Promise((resolve, reject)=>{
+            let _window:any = window;
+            let AMap = _window.AMap;
+            AMap.plugin('AMap.Geocoder', ()=> {
+            let geocoder = new AMap.Geocoder({})
+            geocoder.getAddress(lng, (status:any, result:any) =>{
+              if (status === 'complete' && result.info === 'OK') {
+                    resolve(result.regeocode)
+                }else{
+                    reject(result.regeocode)
+                }
+              })
+            })
+        });
+    }
+
+
+}

src/shims-vue.d.ts

@@ -5,4 +5,5 @@ declare module '*.vue' {
 declare module 'vue-quill-editor';
 declare module 'weixin-js-sdk';
 declare module 'v-calendar/lib/components/calendar.umd';
-declare module 'vue-touch';
\ No newline at end of file
+declare module 'vue-touch';
+declare module 'vue-amap';
\ No newline at end of file