diff --git a/front-end/h5/src/components/plugins/lbp-qq-map/README.md b/front-end/h5/src/components/plugins/lbp-qq-map/README.md new file mode 100644 index 00000000..c0bde490 --- /dev/null +++ b/front-end/h5/src/components/plugins/lbp-qq-map/README.md @@ -0,0 +1,4 @@ +# lbp-qq-map +> luban-h5-plugin-qq-map + +为鲁班H5提供腾讯地图支持(https://lbs.qq.com/) \ No newline at end of file diff --git a/front-end/h5/src/components/plugins/lbp-qq-map/src/Map.js b/front-end/h5/src/components/plugins/lbp-qq-map/src/Map.js new file mode 100644 index 00000000..8c0ac6c8 --- /dev/null +++ b/front-end/h5/src/components/plugins/lbp-qq-map/src/Map.js @@ -0,0 +1,26 @@ +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) // 地图的中心地理坐标 + } +} diff --git a/front-end/h5/src/components/plugins/lbp-qq-map/src/index.vue b/front-end/h5/src/components/plugins/lbp-qq-map/src/index.vue new file mode 100644 index 00000000..cee69676 --- /dev/null +++ b/front-end/h5/src/components/plugins/lbp-qq-map/src/index.vue @@ -0,0 +1,123 @@ + + diff --git a/front-end/h5/src/components/plugins/lbp-qq-map/src/mixin.js b/front-end/h5/src/components/plugins/lbp-qq-map/src/mixin.js new file mode 100644 index 00000000..a6ac08a9 --- /dev/null +++ b/front-end/h5/src/components/plugins/lbp-qq-map/src/mixin.js @@ -0,0 +1,24 @@ +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 }) + } + } + } +} diff --git a/front-end/h5/src/components/plugins/lbp-qq-map__editor.js b/front-end/h5/src/components/plugins/lbp-qq-map__editor.js new file mode 100644 index 00000000..d5337b7d --- /dev/null +++ b/front-end/h5/src/components/plugins/lbp-qq-map__editor.js @@ -0,0 +1,91 @@ +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 ( +
+ +
+
+ ) + } +} diff --git a/front-end/h5/src/mixins/load-plugins.js b/front-end/h5/src/mixins/load-plugins.js index 55d85e72..ed07c365 100644 --- a/front-end/h5/src/mixins/load-plugins.js +++ b/front-end/h5/src/mixins/load-plugins.js @@ -13,6 +13,7 @@ import LbpSlide from '../components/plugins/lbp-slide' 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: {