web-component-gallery 0.1.13 → 0.1.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "web-component-gallery",
-  "version": "0.1.13",
+  "version": "0.1.15",
   "description": "vue-library-ui组件库",
   "main": "dist/index.umd.js",
   "files": [

package/plugins/method/AMap.js

@@ -1,155 +1,142 @@
 // amap-plugin.js
 import AMapLoader from '@amap/amap-jsapi-loader'
+ 
+// 在 Vue 插件中封装高德地图的初始化和常用方法 
+export default {
+  install(Vue, options) {
 
-// 在 Vue 插件中封装高德地图的初始化和常用方法
-function AmapPlugin(Vue, options) {
+    /** 设置高德地图密钥 */
+    window.forceWebGL = true
+    window._AMapSecurityConfig = {
+      securityJsCode: options.securityJsCode
+    }
+    
+    /** 加载地图sdk */
+    AMapLoader.load({
+      key: options.key, // 高德地图的API Key
+      version: '2.0', // 指定API版本
+      plugins: ['AMap.Geocoder', 'AMap.PlaceSearch', 'AMap.ControlBar'] // 需要使用的插件
+    }).then( AMap => {
+    
+      Vue.prototype.$amap = AMap
   
-  /** 设置高德地图密钥 */
-  window.forceWebGL = true
-  window._AMapSecurityConfig = {
-    securityJsCode: options.securityJsCode
-  }
+      // 初始化高德地图
+      Vue.prototype.$initAMap = function(el, callback) { 
+        this.$nextTick(() => { 
+          const map = new AMap.Map(el, {
+            zoom: 11, // 初始化时地图的缩放级别
+            ...options.config // 其他高德地图初始化参数
+          })
+          callback && callback(map)
+        }) 
+      }
   
-  /** 加载地图sdk */
-  const AMap = AMapLoader.load({
-    key: options.key, // 高德地图的API Key
-    version: '2.0', // 指定API版本
-    plugins: ['AMap.Geocoder', 'AMap.PlaceSearch', 'AMap.ControlBar'] // 需要使用的插件
-  })
+      /** 抛出地图常用方法 */ 
+      Vue.prototype.$amapMethods = {
+        getMapAddress,
+        setMapDriving,
+        drawMapAnimation
+      }
 
-  if (!AMap) {
-    throw new Error('高德地图脚本还未加载，请确保在使用此插件前已经加载高德地图SDK。')
-  }
+    } ).catch( error => { throw new Error('高德地图脚本还未加载，请确保在使用此插件前已经加载高德地图SDK。') } )
+  
+    // 其他可能需要封装的高德地图常用方法...
 
-  // 初始化高德地图
-  Vue.prototype.$initAMap = function(el, callback) {
-    this.$nextTick(() => {
-      const map = new AMap.Map(el, {
-        zoom: 11, // 初始化时地图的缩放级别
-        ...options.config // 其他高德地图初始化参数
+    /** 后续考虑加入一些map方法 */
+    /** 地图逆地理编码 */
+    function getMapAddress({longitude, latitude}, callback) {
+      const geocoder = new AMap.Geocoder({
+        city: '全国',
+        // 获取道路poi等详细信息 
+        extensions: 'all'
       })
-      callback && callback(map)
-    })
-  }
-
-  /** 抛出地图常用方法 */ 
-  Vue.prototype.$amapMethods = {
-    getMapAddress,
-    setMapDriving,
-    drawMapAnimation
-  }
- 
-  // 其他可能需要封装的高德地图常用方法...
-
-  /** 后续考虑加入一些map方法 */
-  /** 地图逆地理编码 */
-  function getMapAddress({longitude, latitude}, callback) {
-    const geocoder = new AMap.Geocoder({
-      city: '全国',
-      // 获取道路poi等详细信息 
-      extensions: 'all'
-    })
 
-    geocoder.getAddress(new Array(longitude, latitude), (status, result) => {
-      if (status === 'complete' && result.info === 'OK') {
-        const { formattedAddress, pois } = result.regeocode
-        const { district, township } = result.regeocode.addressComponent
-        let address
+      geocoder.getAddress(new Array(longitude, latitude), (status, result) => {
+        if (status === 'complete' && result.info === 'OK') {
+          const { formattedAddress, pois } = result.regeocode
+          const { district, township } = result.regeocode.addressComponent
+          let address
 
-        const division =
-          township && formattedAddress.includes(township)
-            ? formattedAddress.indexOf(township) + township.length
-            : formattedAddress.indexOf(district) + district.length
+          const division =
+            township && formattedAddress.includes(township)
+              ? formattedAddress.indexOf(township) + township.length
+              : formattedAddress.indexOf(district) + district.length
 
-        address = formattedAddress.slice(0, division) + pois[0]?.address
+          address = formattedAddress.slice(0, division) + pois[0]?.address
 
-        callback && callback({
-            address,
-            addressInfo: result.regeocode.addressComponent
-        })
-      }
-    })
-  } 
-
-  /** 道路规划 */
-  function setMapDriving(AMapInit, paths, callback) {
-    AMapInit.plugin("AMap.Driving", () => {  
-        let planRoutes = new AMap.Driving({ map: AMapInit })
-        planRoutes.search( 
-            setLngLat( paths[ 0 ] ), 
-            setLngLat( paths[ paths.length - 1 ] ),
-            { waypoints: paths.slice( 1, paths.length - 1 ).map( path => setLngLat( path ) ) }, 
-            function (status, result) {
-                if(status == 'complete') return
-                callback && callback( parseRouteToPath( e.routes[0] ), roadDriving )
-                //status：complete 表示查询成功，no_data 为查询无结果，error 代表查询错误
-                //查询成功时，result 即为对应的驾车导航信息
-            }
-        )
-    }) 
-  } 
+          callback && callback({
+              address,
+              addressInfo: result.regeocode.addressComponent
+          })
+        }
+      })
+    } 
 
-  /** 轨迹动画 */
-  function drawMapAnimation(AMapInit, options, pathOptions, callback) {
-    AMapInit.plugin('AMap.MoveAnimation', () => {
-        let animationMarker = new AMap.Marker({
-            map: AMapInit,
-            icon: options.icon,
-            position: options.paths[0],
-            ...options
-        })
-        let passedPolyline = new AMap.Polyline({
-            map: AMapInit,
-            ...pathOptions
-        })
+    /** 道路规划 */
+    function setMapDriving(AMapInit, paths, callback) {
+      AMapInit.plugin("AMap.Driving", () => {  
+          let planRoutes = new AMap.Driving({ map: AMapInit })
+          planRoutes.search( 
+              setLngLat( paths[ 0 ] ), 
+              setLngLat( paths[ paths.length - 1 ] ),
+              { waypoints: paths.slice( 1, paths.length - 1 ).map( path => setLngLat( path ) ) }, 
+              function (status, result) {
+                  if(status == 'complete') return
+                  callback && callback( parseRouteToPath( e.routes[0] ), roadDriving )
+                  //status：complete 表示查询成功，no_data 为查询无结果，error 代表查询错误
+                  //查询成功时，result 即为对应的驾车导航信息
+              }
+          )
+      }) 
+    } 
 
-        animationMarker.on('moving',  e => {
-            passedPolyline.setPath( e.passedPath )
-            AMapInit.setCenter( e.target.getPosition(), true )    
-        })
+    /** 轨迹动画 */
+    function drawMapAnimation(AMapInit, options, pathOptions, callback) {
+      AMapInit.plugin('AMap.MoveAnimation', () => {
+          let animationMarker = new AMap.Marker({
+              map: AMapInit,
+              icon: options.icon,
+              position: options.paths[0],
+              ...options
+          })
+          let passedPolyline = new AMap.Polyline({
+              map: AMapInit,
+              ...pathOptions
+          })
 
-        animationMarker.moveAlong(paths, {
-            // circlable 是否循环
-            // 每段间隔时间
-            // aniInterval: 5,
-            // 每一段的时长
-            duration: 500, // 可根据实际采集时间间隔设置
-            // JSAPI2.0 是否延道路自动设置角度在 moveAlong 里设置
-            autoRotation: true
-        })
-        callback && callback( animationMarker, passedPolyline )
-    })
-  }
+          animationMarker.on('moving',  e => {
+              passedPolyline.setPath( e.passedPath )
+              AMapInit.setCenter( e.target.getPosition(), true )    
+          })
 
-  // 解析DrivingRoute对象，构造成AMap.Polyline的path参数需要的格式
-  function parseRouteToPath(route) {
-    let path = []
-    let ApproachPoint = []
-    let pointI = 0
-    for (let i = 0, l = route.steps.length; i < l; i++) {
-        let step = route.steps[i]
-        for (let j = 0, n = step.path.length; j < n; j++) {
-            path.push(step.path[j])
-            if( step.assistant_action == "到达途经地" && (j == n - 1)  ) ApproachPoint.push( pointI )
-            pointI++
-        }
+          animationMarker.moveAlong(paths, {
+              // circlable 是否循环
+              // 每段间隔时间
+              // aniInterval: 5,
+              // 每一段的时长
+              duration: 500, // 可根据实际采集时间间隔设置
+              // JSAPI2.0 是否延道路自动设置角度在 moveAlong 里设置
+              autoRotation: true
+          })
+          callback && callback( animationMarker, passedPolyline )
+      })
     }
-    return { path, ApproachPoint }
-  }
 
-}
- 
-// 为了能够在 Vue 中全局使用插件，可以添加一个 install 方法
-AmapPlugin.install = function(Vue, options) {
-  Vue.mixin({
-    created() {
-      if (this.$options.amap) {
-        this.$initAMap(this.$options.amap.el, this.$options.amap.callback)
+    // 解析DrivingRoute对象，构造成AMap.Polyline的path参数需要的格式
+    function parseRouteToPath(route) {
+      let path = []
+      let ApproachPoint = []
+      let pointI = 0
+      for (let i = 0, l = route.steps.length; i < l; i++) {
+          let step = route.steps[i]
+          for (let j = 0, n = step.path.length; j < n; j++) {
+              path.push(step.path[j])
+              if( step.assistant_action == "到达途经地" && (j == n - 1)  ) ApproachPoint.push( pointI )
+              pointI++
+          }
       }
+      return { path, ApproachPoint }
     }
-  })
-  
-  Vue.prototype.$amap = AmapPlugin
-}
- 
-export default AmapPlugin
+
+  }
+}