feat(component): add map component; !#zh: 添加地图组件

ly525 · 小小鲁班
1 parent b982753a
Showing 6 changed files with 272 additions and 3 deletions
front-end/h5/src/components/plugins/lbp-qq-map/README.md
front-end/h5/src/components/plugins/lbp-qq-map/src/Map.js
front-end/h5/src/components/plugins/lbp-qq-map/src/index.vue
front-end/h5/src/components/plugins/lbp-qq-map/src/mixin.js
front-end/h5/src/components/plugins/lbp-qq-map__editor.js
front-end/h5/src/mixins/load-plugins.js
+# lbp-qq-map
+> luban-h5-plugin-qq-map
+
+为鲁班H5提供腾讯地图支持(https://lbs.qq.com/)
 \ No newline at end of file
+function isScriptLoaded (src) {
+  return !!document.querySelector('script[src="' + src + '"]')
+}
+export default {
+  map: null,
+  load: function (key) {
+    return new Promise(function (resolve, reject) {
+      const src = 'http://map.qq.com/api/js?v=2.exp&libraries=place&callback=init&key=' + key
+      if (isScriptLoaded(src)) {
+        resolve(window.qq)
+        return
+      }
+      window.init = function () {
+        resolve(window.qq)// 注意这里
+      }
+      var script = document.createElement('script')
+      script.type = 'text/javascript'
+      script.src = src
+      script.onerror = reject
+      document.head.appendChild(script)
+    })
+  },
+  getPosition ({ lat, lng }) {
+    return new window.qq.maps.LatLng(lat, lng) // 地图的中心地理坐标
+  }
+}
+<template>
+  <div>
+    <div id="qq-map-container" ref="mapElement" style="height: 100%;width: 100%"></div>
+  </div>
+</template>
+<script>
+import PropTypes from '@luban-h5/plugin-common-props'
+import Map from './Map'
+import MapMixin from './mixin'
+
+export default {
+  // extra.defaultStyle：组件的额外自定义配置，以拖拽组件到画布上为例
+  // 按钮默认的样式可能是: { width: 100px, height: 40px }
+  // 但地图可能是希望更大一些的默认样式，比如：{ width: 320px, height: 180px }
+  // 就可以通过 extra.defaultStyle 来实现自定义样式需求
+  extra: {
+    defaultStyle: {
+      width: 320,
+      height: 180
+    }
+  },
+  name: 'lbp-qq-map',
+  mixins: [MapMixin], // loadMap、setMarker
+  props: {
+    labelContent: PropTypes.string({ label: '地址名称', defaultValue: '' }), // 标签内容
+    zoomLevel: PropTypes.number({ label: '缩放层级', defaultValue: 12, visible: false }),
+    // https://lbs.qq.com/dev/console/key/manage
+    qqMapKey: PropTypes.string({
+      label: '腾讯地图Key',
+      defaultValue: 'GENBZ-G5S3J-7OLFW-FLBX4-WVEMK-SOBL4',
+      component: 'a-textarea',
+      extra: (h) => {
+        return <div>
+          <div>1. 请填入自己的腾讯地图开发密钥，<a href="https://lbs.qq.com/dev/console/key/manage" target="_blank">前往申请&gt;&gt;</a></div>
+          <div>2. 鲁班的 Demo Key 随时可能失效；失效提示: 鉴权失败，请传入正确的key</div>
+        </div>
+      }
+    }),
+    poi: {
+      type: Object,
+      default: () => ({
+        'latLng': {
+          'lat': 39.90469,
+          'lng': 116.40717
+        },
+        'name': '北京市',
+        'type': 4
+      }),
+      editor: {
+        custom: true
+      }
+    }
+  },
+  watch: {
+    poi: {
+      handler (poi) {
+        if (!this.checkMapAvailable()) return
+        this.setMarker(poi)
+      },
+      deep: true
+    },
+    labelContent (labelContent) {
+      if (!this.checkMapAvailable()) return
+      this.setLabel(labelContent)
+    },
+    zoomLevel (zoomLevel) {
+      if (!this.checkMapAvailable()) return
+      this.setZoomLevel(zoomLevel)
+    }
+  },
+  methods: {
+    checkMapAvailable () {
+      return window.qq && window.qq.maps
+    },
+    onSearch (value) {
+      console.log(value)
+    },
+    setLabel (labelContent) {
+      const center = Map.getPosition(this.poi.latLng) // 地图的中心地理坐标
+      this.label = this.label || new window.qq.maps.Label({
+        position: center,
+        map: this.map,
+        content: ''
+      })
+      if (labelContent.trim()) {
+        // https://lbs.qq.com/webDemoCenter/javascriptV2/marker/label
+        this.label.setVisible(true)
+        this.label.setContent(labelContent || '')
+        this.label.setPosition(center)
+      } else {
+        this.label.setVisible(false)
+      }
+    },
+    setZoomLevel (zoomLevel) {
+      this.map.zoomTo(zoomLevel)
+    },
+    init () {
+      const { poi, qqMapKey } = this
+      this.loadMap(qqMapKey).then(qq => {
+        this.initMap(poi)
+        this.setLabel(this.labelContent)
+        this.setMarker(poi)
+      })
+    },
+    initMap (poi) {
+      const el = this.$refs.mapElement
+      const center = Map.getPosition(poi.latLng) // 地图的中心地理坐标
+      this.map = new window.qq.maps.Map(el, {
+        center,
+        zoom: this.zoomLevel, // 设置地图的缩放级别
+        disableDefaultUI: true, // 禁止所有控件
+        draggable: false, // 设置是否可以拖拽
+        scrollwheel: false, // 设置是否可以滚动
+        disableDoubleClickZoom: true // 设置是否可以双击放大
+        // 设置地图样式详情参见MapType
+      })
+    }
+  },
+  mounted () {
+    this.init()
+  }
+}
+</script>
+import Map from './Map'
+
+function getPosition ({ lat, lng }) {
+  return new window.qq.maps.LatLng(lat, lng) // 地图的中心地理坐标
+}
+
+export default {
+  methods: {
+    loadMap (key) {
+      return Map.load(key)
+    },
+    setMarker (poi) {
+      const map = this.map
+      const center = getPosition(poi.latLng) // 地图的中心地理坐标
+      if (this.marker) {
+        this.marker.setMap(null)
+        this.marker = new window.qq.maps.Marker({ map, position: poi.latLng })
+        map.panTo(center)
+      } else {
+        this.marker = new window.qq.maps.Marker({ map, position: center })
+      }
+    }
+  }
+}
+import Map from './lbp-qq-map/src/Map'
+import MapMixin from './lbp-qq-map/src/mixin'
+
+export default {
+  name: 'lbp-qq-map__editor',
+  mixins: [MapMixin], // loadMap、setMarker
+  props: {
+    // 地图的props 集合
+    elementProps: {
+      type: Object,
+      default: () => ({
+        labelContent: '',
+        zoomLevel: 12
+      })
+    }
+  },
+  methods: {
+    /**
+     * 更新组件的 poi prop
+     * @param {Object} poi 参考 lbp-qq-map 的 poi prop，用来表示坐标点信息
+     */
+    setPoi (poi) {
+      this.elementProps.poi = poi
+    },
+    // https://lbs.qq.com/webDemoCenter/javascriptV2/libraries/placeLibrary
+    initSearch () {
+      const self = this
+      let keyword = ''
+
+      // 调用Poi检索类。用于进行本地检索、周边检索等服务。
+      const searchService = new window.qq.maps.SearchService({
+        complete: results => {
+          if (results.type === 'CITY_LIST') {
+            searchService.setLocation(results.detail.cities[0].cityName)
+            searchService.search(keyword)
+            return
+          }
+          const poi = results.detail.pois[0]
+          self.setMarker(poi)
+          self.setPoi(poi)
+        }
+      })
+      // 添加监听事件
+      const qqMapSearchElement = document.getElementById('editor__qq-map-search')
+      const ap = new window.qq.maps.place.Autocomplete(qqMapSearchElement)
+
+      window.qq.maps.event.addListener(ap, 'confirm', function (res) {
+        keyword = res.value
+        searchService.search(keyword)
+      })
+    },
+    /**
+     * 监听地图 缩小/放大
+     */
+    listenZoom () {
+      window.qq.maps.event.addListener(this.map, 'zoom_changed', () => {
+        this.elementProps.zoomLevel = this.map.getZoom()
+      })
+    },
+    initMap (poi) {
+      const center = Map.getPosition(poi.latLng) // 地图的中心地理坐标
+      const el = document.getElementById('editor__qq-map-container')
+      this.map = new window.qq.maps.Map(el, {
+        center,
+        zoom: 8, // 设置地图的缩放级别
+        disableDefaultUI: true // 禁止所有控件
+        // 设置地图样式详情参见MapType
+      })
+    },
+    init () {
+      const { poi, qqMapKey } = this.elementProps
+      this.loadMap(qqMapKey).then(qq => {
+        this.initMap(poi)
+        this.setMarker(poi)
+        this.initSearch()
+        this.listenZoom()
+      })
+    }
+  },
+  mounted () {
+    this.init()
+  },
+  render () {
+    return (
+      <div style="margin: 12px;">
+        <input ref="search" id="editor__qq-map-search" placeholder="请输入地名" style="width: 100%;margin-bottom: 20px;" />
+        <div id="editor__qq-map-container" style="padding-bottom: 60%;width: 100%"></div>
+      </div>
+    )
+  }
+}
@@ -13,6 +13,7 @@ import LbpSlide from &#39;../components/plugins/lbp-slide&#39;
 import LbpBgMusic from '../components/plugins/lbp-bg-music'
 import LbpNoticeBar from '../components/plugins/lbp-notice-bar'
 import LbpRate from '../components/plugins/lbp-rate'
+import LbpQQMap from '../components/plugins/lbp-qq-map/src'
 // import LbpTabs from '../components/plugins/lbp-tabs'
 export const pluginsList = [
@@ -101,10 +102,10 @@ export const pluginsList = [
     },
     title: '地图',
     icon: 'map-o',
-    component: LbpFormRadioGroup,
+    component: LbpQQMap,
     visible: true,
-    name: LbpFormRadioGroup.name,
-    disabled: true
+    name: LbpQQMap.name
+    // disabled: true
   },
   {
     i18nTitle: {