add map components

chenghao · chenghao · commit dd812a3e3fe0 · 2018-03-25T15:34:34.000+08:00
diff --git a/package.json b/package.json
@@ -46,6 +46,7 @@
     "react-draft-wysiwyg": "^1.10.0",
     "react-draggable": "^2.2.6",
     "react-error-overlay": "^1.0.9",
+    "react-qmap": "^0.1.5",
     "react-redux": "^5.0.5",
     "react-router-dom": "^4.2.2",
     "recharts": "^1.0.0-alpha.1",
diff --git a/src/components/ui/map/Tencent.js b/src/components/ui/map/Tencent.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import ReactQMap from 'react-qmap';
+
+const getContianer = dom => {
+    const middleControl = document.createElement('div');
+    middleControl.style.cssText = 'width: 22px;height: 30px;position: absolute;left: 50%;top: 50%;z-index: 999;margin-left: -23px;margin-top: -23px;';
+    middleControl.innerHTML = `<img src="${require('../../../style/imgs/spot_location.png')}" style="width: 100%;height: 100%;" />`;
+    dom.appendChild(middleControl);
+}
+
+export default () => (
+    <ReactQMap
+        center={{latitude: 30.53786, longitude: 104.07265}} 
+        initialOptions={{zoomControl: true, mapTypeControl: true}} 
+        apiKey="UN6BZ-MP2W6-XWCSX-M2ATU-QORGZ-OWFOE"
+        style={{height: 500}}
+        mySpot={{latitude: 30.53786, longitude: 104.07265}}
+        getContainer={getContianer}
+    />
+);
diff --git a/src/components/ui/map/index.js b/src/components/ui/map/index.js
@@ -0,0 +1,19 @@
+import React from 'react';
+import Tencent from './Tencent';
+import { Row, Col, Card } from 'antd';
+import BreadcrumbCustom from '../../BreadcrumbCustom';
+
+export default () => (
+    <div>
+        <BreadcrumbCustom first="UI" second="地图" />
+        <Row gutter={16}>
+            <Col md={24}>
+                <div style={{height: 500}}>
+                    <Card bordered={false} title="腾讯地图">
+                        <Tencent />
+                    </Card>
+                </div>
+            </Col>
+        </Row>
+    </div>
+)
diff --git a/src/constants/menus.js b/src/constants/menus.js
@@ -13,6 +13,7 @@ export const menus = [
             { key: '/app/ui/wysiwyg', title: '富文本', icon: '', },
             { key: '/app/ui/drags', title: '拖拽', icon: '', },
             { key: '/app/ui/gallery', title: '画廊', icon: '', },
+            { key: '/app/ui/map', title: '地图'},
         ],
     },
     {
diff --git a/src/routes/index.js b/src/routes/index.js
@@ -27,6 +27,7 @@ import RouterEnter from '../components/auth/RouterEnter';
 import Wysiwyg from 'bundle-loader?lazy!../components/ui/Wysiwyg';  // 按需加载富文本配置
 import Bundle from '../components/widget/Bundle';
 import Cssmodule from '../components/cssmodule';
+import MapUi from '../components/ui/map';
 
 const WysiwygBundle = (props) => (
     <Bundle load={Wysiwyg}>
@@ -63,6 +64,7 @@ export default class CRouter extends Component {
                 <Route exact path="/app/ui/wysiwyg" component={WysiwygBundle} />
                 <Route exact path="/app/ui/drags" component={Drags} />
                 <Route exact path="/app/ui/gallery" component={Gallery} />
+                <Route exact path="/app/ui/map" component={MapUi} />
 
                 <Route exact path="/app/animation/basicAnimations" component={BasicAnimations} />
                 <Route exact path="/app/animation/exampleAnimations" component={ExampleAnimations} />
diff --git a/src/style/imgs/spot_location.png b/src/style/imgs/spot_location.png
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -13,6 +13,7 @@ export const menus = [`
`13`	`13`	`{ key: '/app/ui/wysiwyg', title: '富文本', icon: '', },`
`14`	`14`	`{ key: '/app/ui/drags', title: '拖拽', icon: '', },`
`15`	`15`	`{ key: '/app/ui/gallery', title: '画廊', icon: '', },`
	`16`	`+ { key: '/app/ui/map', title: '地图'},`
`16`	`17`	`],`
`17`	`18`	`},`
`18`	`19`	`{`