Merge pull request #79 from jenkey2011/feat/upgrade-mip-map

地图组件升级

components/mip-map/example/mip-map.html

@@ -9,6 +9,7 @@
   <link rel="stylesheet" href="https://bos.nj.bpc.baidu.com/assets/mip/projects/mip.css">
   <style mip-custom>
     /* 自定义样式 */
+
   </style>
 </head>
 
@@ -17,28 +18,29 @@
     <script type="application/json">
       {
         "ak": "hKhuzfFBrcL6zGm4s6b371NDxaUrhFPl",
+        "hide-map": false,
+        "get-position": true,
         "location": {
           "province": "北京",
           "city": "北京市",
           "district": "东城区",
           "street": "故宫博物馆"
         },
         "controls": {
-          "NavigationControl": {
-          },
-          "MapTypeControl": {
-          }
+          "NavigationControl": {},
+          "MapTypeControl": {}
         },
         "info": {
-          "width" : 250,
+          "width": 250,
           "height": 100,
           "content": "<h4>故宫博物馆</h4><p>地址：北京市东城区景山前街4号<br/>电话：(010)65131892</p></div>"
         }
       }
+
     </script>
   </mip-map>
   <script src="https://bos.nj.bpc.baidu.com/assets/mip/projects/mip.js"></script>
   <script src="/mip-map/mip-map.js"></script>
 </body>
 
-</html>
+</html>

components/mip-map/mip-map.md

@@ -17,22 +17,22 @@
   <script type="application/json">
     {
       "ak": "hKhuzfFBrcL6zGm4s6b371NDxaUrhFPl",
+      "hide-map": false,
+      "get-position": true,
       "location": {
         "province": "北京",
         "city": "北京市",
-        "district": "海淀区",
-        "street": "百度大厦"
+        "district": "东城区",
+        "street": "故宫博物馆"
       },
       "controls": {
-        "NavigationControl": {
-        },
-        "MapTypeControl": {
-        }
+        "NavigationControl": {},
+        "MapTypeControl": {}
       },
       "info": {
-        "width" : 250,
+        "width": 250,
         "height": 100,
-        "content": "<h4>百度大厦</h4><p>地址：北京市海淀区上地十街10号<br/>电话：(010)59928888<br/>简介：百度大厦位于北京市海淀区西二旗地铁站附近，为百度公司综合研发及办公总部。</p></div>"
+        "content": "<h4>故宫博物馆</h4><p>地址：北京市东城区景山前街4号<br/>电话：(010)65131892</p></div>"
       }
     }
   </script>
@@ -94,5 +94,65 @@
 ### data-only-get-sdk
 
 说明：是否只加载地图 SDK
-必填：否  
+必填：否
 格式：Boolean
+默认：false
+
+### hide-map
+
+说明：是否隐藏地图
+必填：否
+格式：Boolean
+默认：false
+
+### get-position
+
+说明：是否自动定位
+必填：否
+格式：Boolean
+默认：false
+
+## 触发事件
+
+### getPositionComplete
+
+如设置定位且成功定位，则透传经纬度等信息
+透传数据结构如下：
+
+```js
+{
+  "accuracy":30,
+  "altitude":null,
+  "altitudeAccuracy":null,
+  "heading":null,
+  "latitude":40.050551292543,
+  "longitude":116.28123645733,
+  "speed":null,
+  "timestamp":null,
+  "point":{
+      "lng":116.28123645733,
+      "lat":40.050551292543
+  },
+  "address":{
+      "city":"北京市",
+      "city_code":0,
+      "district":"海淀区",
+      "province":"北京市",
+      "street":"软件园西三路辅路",
+      "street_number":""
+  }
+}
+```
+### getPositionFailed
+定位失败
+
+### searchLocalFailed
+
+无法定位值`local`所配位置时，触发此事件，并切换为自动定位
+
+
+## 暴露方法
+
+### getLocal
+
+获取当前定位

components/mip-map/mip-map.vue

@@ -4,6 +4,7 @@
 <template>
   <div
     id="allmap"
+    :class="{hideMap: hideMap}"
     class="wrapper"
   />
 </template>
@@ -33,16 +34,25 @@ export default {
         return null
       }
     },
+    getPosition: {
+      type: Boolean,
+      default: false
+    },
     dataOnlyGetSdk: {
       type: Boolean,
       default: false
+    },
+    hideMap: {
+      type: Boolean,
+      default: false
     }
   },
   data () {
     return {
       map: null,
       point: {},
-      marker: null
+      marker: null,
+      currentMarker: null
     }
   },
   firstInviewCallback () {
@@ -51,7 +61,7 @@ export default {
   methods: {
     init () {
       this.getMapJDK().then(() => {
-        this.handleResult()
+        this.resolveOptions()
       })
     },
 
@@ -81,10 +91,55 @@ export default {
     },
 
     /**
-     * 初始化地图并加载控件
+     * 根据配置执行相应方法
+     *
+     */
+    resolveOptions () {
+      let BMap = window.BMap
+
+      // 仅加载SDK，不初始化地图
+      if (this.dataOnlyGetSdk) {
+        return this.loadSdk()
+      }
+
+      // 初始化地图
+      this.map = new BMap.Map('allmap')
+      this.map.centerAndZoom(new BMap.Point(116.404, 39.915), 15)
+
+      // 隐藏地图
+      this.hideMap && this.hideMapView()
+
+      // 自动定位、或者手动定位
+      this.getPosition ? this.getCurrentLocation() : this.searchLocation()
+
+      // 暴露自动定位方法
+      this.$on('getLocal', () => {
+        // 可能会在未完全初始化的时候调用
+        this.getMapJDK().then(() => {
+          this.getCurrentLocation()
+        })
+      })
+      // 配置控件
+      this.controls && this.addControls()
+    },
+
+    /**
+     * 隐藏地图
+     *
+     */
+    hideMapView () {
+      let mipMap = this.$element
+      MIP.util.css(mipMap, {
+        width: 0,
+        height: 0
+      })
+    },
+
+    /**
+     * 仅加载sdk
      *
      */
-    handleResult () {
+    loadSdk () {
       let BMap = window.BMap
 
       // BMap注入沙盒
@@ -97,39 +152,50 @@ export default {
 
       // 派发事件
       this.$emit('loaded', {})
+    },
 
-      // 仅加载SDK，不初始化地图
-      if (this.dataOnlyGetSdk) {
-        return
-      }
-
-      // 初始化地图
-      this.map = new BMap.Map('allmap')
-      this.map.centerAndZoom(new BMap.Point(116.404, 39.915), 15)
+    /**
+     * 自动定位
+     *
+     */
+    getCurrentLocation () {
+      let BMap = window.BMap
+      let geolocation = new BMap.Geolocation()
+      geolocation.getCurrentPosition((res) => {
+        // 无定位权限
+        if (!res.accuracy) {
+          return this.$emit('getPositionFailed', res)
+        } else if (geolocation.getStatus() === window.BMAP_STATUS_SUCCESS) {
+          this.currentMarker = new BMap.Marker(res.point)
+          this.map.addOverlay(this.currentMarker)
+          this.map.panTo(res.point)
 
-      // 创建地址解析器实例
-      let address = this.traverseAndConcat(this.location)
-      if (address && this.location.city) {
-        this.handlePoint()
-      }
+          // 派发事件
+          this.$emit('getPositionComplete', res)
+        }
+      }, { enableHighAccuracy: true })
     },
 
     /**
-     * 处理定位的函数
+     * 定位至local配置的位置
      *
      */
-    handlePoint () {
+    searchLocation () {
       let BMap = window.BMap
       let { location, map } = this
 
       // 配置地址
       let address = this.traverseAndConcat(location)
-      if (!address) {
+
+      // 没有定位信息，则使用自动定位
+      if (!address || !this.location.city) {
+        this.getCurrentLocation()
+        this.$emit('searchLocalFailed', {})
         return
       }
       let options = {
         onSearchComplete: results => {
-          if (local.getStatus() !== 0) {
+          if (local.getStatus() !== window.BMAP_STATUS_SUCCESS) {
             return
           }
           let firstResult = results.getPoi(0)
@@ -143,9 +209,7 @@ export default {
           map.centerAndZoom(point, 15)
 
           // 配置弹层
-          this.handleInfoWindow()
-          // 配置控件
-          this.handleControls()
+          this.setInfoWindow()
         }
       }
 
@@ -158,7 +222,7 @@ export default {
      * 配置弹层信息
      *
      */
-    handleInfoWindow () {
+    setInfoWindow () {
       let BMap = window.BMap
       let { info, map, marker, point } = this
       if (!info) {
@@ -174,7 +238,7 @@ export default {
      * 配置地图控件
      *
      */
-    handleControls () {
+    addControls () {
       let BMap = window.BMap
       let { controls, map } = this
       for (let key in controls) {
@@ -210,6 +274,11 @@ export default {
 #allmap {
   width: 100%;
   height: 100%;
+  &.hideMap {
+    width: 0;
+    height: 0;
+    visibility: hidden;
+  }
   // mip核心css 会覆盖地图定位图片样式
   & /deep/ img {
     width: auto;