├── favicon.ico ├── README.md ├── src ├── assets │ ├── iconfont │ │ ├── iconfont.eot │ │ ├── iconfont.ttf │ │ ├── iconfont.woff │ │ ├── iconfont.css │ │ ├── demo.css │ │ ├── demo_fontclass.html │ │ ├── demo_unicode.html │ │ ├── demo_symbol.html │ │ ├── iconfont.svg │ │ └── iconfont.js │ └── css │ │ ├── map.css │ │ ├── index.css │ │ ├── footerBar.css │ │ ├── search.css │ │ ├── loading.css │ │ ├── mappath.css │ │ └── reset.css ├── store │ ├── state.js │ └── reducer.js ├── component │ ├── headerTitle.js │ ├── loading.js │ ├── App.js │ ├── FooterBar.js │ ├── MapPath.js │ ├── Search.js │ └── Map.js ├── index.js └── router.config.js ├── .idea ├── encodings.xml ├── misc.xml ├── jsLibraryMappings.xml ├── modules.xml ├── 17.4.26.iml ├── watcherTasks.xml └── workspace.xml ├── index.html ├── webpack.config.js ├── package.json └── npm-debug.log /favicon.ico: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## 使用React制作mapAPP（基于百度地图api） 2 | 3 | 目前只有首页可以使用还有很多功能为实现（持续更新中） 4 | -------------------------------------------------------------------------------- /src/assets/iconfont/iconfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lxyisme/react-mapApp/HEAD/src/assets/iconfont/iconfont.eot -------------------------------------------------------------------------------- /src/assets/iconfont/iconfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lxyisme/react-mapApp/HEAD/src/assets/iconfont/iconfont.ttf -------------------------------------------------------------------------------- /src/assets/iconfont/iconfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lxyisme/react-mapApp/HEAD/src/assets/iconfont/iconfont.woff -------------------------------------------------------------------------------- /src/store/state.js: -------------------------------------------------------------------------------- 1 | const defaultState ={ 2 | startPlace:'', 3 | endPlace:'', 4 | typeOfDrive:'transit', 5 | isDrawRoute:false 6 | }; 7 | export default defaultState; -------------------------------------------------------------------------------- /src/assets/css/map.css: -------------------------------------------------------------------------------- 1 | #container{ 2 | height: 92vh; 3 | } 4 | #placeResult{ 5 | position: absolute; 6 | bottom:0; 7 | } 8 | .anchorBL>a{ 9 | display: none; 10 | } -------------------------------------------------------------------------------- /.idea/encodings.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/component/headerTitle.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | const HeaterTitle = props=>( 3 |

4 | {props.title} 5 |

6 | ); 7 | export default HeaterTitle; -------------------------------------------------------------------------------- /.idea/misc.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' ; 2 | import ReactDom from 'react-dom'; 3 | import RouterConfig from './router.config' 4 | ReactDom.render( 5 | , 6 | document.getElementById('app') 7 | ); -------------------------------------------------------------------------------- /.idea/jsLibraryMappings.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/assets/css/index.css: -------------------------------------------------------------------------------- 1 | html,body{ 2 | height:100%; 3 | } 4 | html{ 5 | font-size: 12px; 6 | } 7 | .headerTitle{ 8 | height:6vh; 9 | line-height: 6vh; 10 | text-align: center; 11 | background: #eaffea; 12 | font-size: 1.4rem; 13 | } -------------------------------------------------------------------------------- /.idea/modules.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /src/component/loading.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import '../assets/css/loading.css' 3 | const Loading =props=>( 4 |
5 |

6 |

7 | {props.loadingContent} 8 |

9 |
10 | ); 11 | export default Loading; -------------------------------------------------------------------------------- /src/store/reducer.js: -------------------------------------------------------------------------------- 1 | const reducer = (state= defaultState ,action)=>{ 2 | let {type,payload} = action; 3 | switch (type){ 4 | case 'SETSTARTPLACE' : 5 | console.log(payload); 6 | return Object.assign({},state,{ 7 | startPlace:payload 8 | }); 9 | break; 10 | } 11 | }; 12 | export default reducer; -------------------------------------------------------------------------------- /src/component/App.js: -------------------------------------------------------------------------------- 1 | import React,{Component} from 'react'; 2 | import FooterBar from './FooterBar' 3 | class App extends Component{ 4 | componentDidMount(){ 5 | this.props.router.location.pathname=='/'?this.props.router.push('/map'):''; 6 | } 7 | render(){ 8 | return ( 9 |
10 | {this.props.children} 11 | 12 |
13 | ) 14 | } 15 | } 16 | export default App; 17 | -------------------------------------------------------------------------------- /.idea/17.4.26.iml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /src/router.config.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {Router,Route,hashHistory} from 'react-router'; 3 | import App from './component/App'; 4 | import Map from './component/Map'; 5 | import MapPath from './component/MapPath'; 6 | const RouterConfig =props=>( 7 | 8 | 9 | 10 | 11 | 12 | 13 | ); 14 | export default RouterConfig; -------------------------------------------------------------------------------- /src/assets/css/footerBar.css: -------------------------------------------------------------------------------- 1 | .footerBar{ 2 | height: 8vh; 3 | display: flex; 4 | justify-content: space-around; 5 | border-top: 1px #ccc solid; 6 | } 7 | .footerBar li{ 8 | text-align: center; 9 | line-height: 8vh; 10 | flex: 1; 11 | } 12 | .footerBar li:nth-child(2){ 13 | border: 1px #ccc solid; 14 | border-bottom: none; 15 | border-top: none; 16 | } 17 | .footerBar li a{ 18 | font-size: 1.4rem; 19 | } 20 | .footerBar li a b{ 21 | margin-right: .5rem; 22 | font-size: 1.6rem; 23 | } 24 | .footerBarActive{ 25 | color:#0086b3; 26 | } -------------------------------------------------------------------------------- /src/component/FooterBar.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {Link} from 'react-router' 3 | import '../assets/css/footerBar.css' 4 | const FooterBar =props=>( 5 | 10 | ); 11 | export default FooterBar -------------------------------------------------------------------------------- /src/assets/css/search.css: -------------------------------------------------------------------------------- 1 | .searchBox{ 2 | position: absolute; 3 | top:5vh; 4 | right:0; 5 | left:0; 6 | margin: 0 auto; 7 | } 8 | .search{ 9 | margin: 0 auto; 10 | width:80%; 11 | background: #fff; 12 | height: 6vh; 13 | display: flex; 14 | justify-content: space-around; 15 | align-content: center; 16 | } 17 | .search b{ 18 | font-size: 1.2rem; 19 | color: #999; 20 | line-height: 6vh; 21 | } 22 | #searchItp{ 23 | width:80%; 24 | border:none; 25 | height: 6vh; 26 | font-size: 1.2rem; 27 | line-height: 6vh; 28 | } -------------------------------------------------------------------------------- /src/assets/css/loading.css: -------------------------------------------------------------------------------- 1 | .placeLoading{ 2 | height: 100vh; 3 | width: 100%; 4 | position: fixed; 5 | top:0; 6 | left:0; 7 | z-index: 1; 8 | } 9 | .placeLoading h1{ 10 | height: 100vh; 11 | width: 100%; 12 | background: #666; 13 | opacity: .4; 14 | position: absolute; 15 | top:0; 16 | left:0; 17 | z-index: 0; 18 | } 19 | .placeLoading p{ 20 | position: absolute; 21 | font-size: 1.4rem; 22 | height: 4vh; 23 | line-height: 4vh; 24 | left:0; 25 | right:0; 26 | top:0; 27 | bottom:0; 28 | z-index: 1; 29 | margin: auto; 30 | text-align: center; 31 | color: #fff; 32 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 666 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | // webpack.config.js 2 | var path = require("path"); 3 | var webpack = require('webpack'); 4 | var ExtractTextPlugin = require("extract-text-webpack-plugin"); 5 | 6 | module.exports = { 7 | entry: { 8 | bundle:['./src/index.js'], 9 | }, 10 | output: { 11 | path: path.join(__dirname, 'build'), 12 | publicPath: "/build/", 13 | filename: '[name].js' 14 | }, 15 | // 新添加的module属性 16 | module: { 17 | loaders: [ 18 | { test: /\.jsx$/, exclude: /node_modules/, loader: 'jsx-loader!babel-loader' }, 19 | { test: /\.js$/, exclude:/node_modules/, loader: 'babel-loader'}, 20 | {test: /\.(jpg|png)$/, loader: "url?limit=8192"}, 21 | {test: /\.css$/, loader: "style-loader!css-loader"}, // 把多个css压缩到一个css中。 22 | ] 23 | }, 24 | babel: { 25 | presets: ["es2015", "react", "stage-2"] 26 | }, 27 | devServer: { inline: true }, 28 | plugins: [ 29 | new webpack.optimize.CommonsChunkPlugin('common.js'), 30 | new ExtractTextPlugin("[name].css"), 31 | new webpack.HotModuleReplacementPlugin() 32 | ] 33 | }; -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "reactObj", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "dev": "webpack-dev-server --hot --inline --open --port 8001" 9 | }, 10 | "author": "wan9", 11 | "license": "ISC", 12 | "devDependencies": { 13 | "babel-core": "^6.21.0", 14 | "babel-loader": "^6.2.10", 15 | "babel-preset-es2015": "^6.18.0", 16 | "babel-preset-react": "^6.16.0", 17 | "babel-preset-stage-2": "^6.18.0", 18 | "css-loader": "^0.23.1", 19 | "extract-text-webpack-plugin": "^1.0.1", 20 | "file-loader": "^0.8.5", 21 | "jsx-loader": "^0.13.2", 22 | "rc-queue-anim": "^0.13.3", 23 | "react": "^15.3.2", 24 | "react-addons-css-transition-group": "^15.4.2", 25 | "react-dom": "^15.3.2", 26 | "react-redux": "^5.0.3", 27 | "react-router": "^3.0.0", 28 | "react-router-dom": "^4.0.0", 29 | "redux": "^3.6.0", 30 | "redux-thunk": "^2.2.0", 31 | "style-loader": "^0.13.1", 32 | "url-loader": "^0.5.7", 33 | "webpack": "^1.13.1", 34 | "webpack-dev-server": "^1.16.2" 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /src/assets/css/mappath.css: -------------------------------------------------------------------------------- 1 | .mapPath{ 2 | height:92vh; 3 | } 4 | .selectPathWay{ 5 | display: flex; 6 | justify-content: space-around; 7 | height:6vh; 8 | line-height: 6vh; 9 | } 10 | .selectPathWay li { 11 | padding:0 1rem; 12 | font-size: 1.2rem; 13 | } 14 | .selectPathWay .activePath{ 15 | border-bottom: .2rem #0086b3 solid; 16 | } 17 | .selectPathWay .activePath a{ 18 | color: #0086b3; 19 | } 20 | .selectPathWay li a{ 21 | color: #999; 22 | } 23 | .pointWarp{ 24 | margin-top: 4vh; 25 | } 26 | .pointWarp p{ 27 | margin-top: .5rem; 28 | } 29 | .pointWarp p:nth-last-child(1){ 30 | margin-top: 1rem; 31 | } 32 | .pointWarp p input{ 33 | display: block; 34 | width:70%; 35 | height:5vh; 36 | margin: 0 auto; 37 | } 38 | .pointWarp .iconfont { 39 | font-size: 3rem; 40 | text-align: center; 41 | color: #df5000; 42 | margin-top: 0; 43 | } 44 | .pointStart,.pointEnd{ 45 | border-radius: .5rem; 46 | border:1px #df5000 solid; 47 | text-indent: 20px; 48 | } 49 | .searchPointBtn{ 50 | color: #fff; 51 | font-size: 1.4rem; 52 | background: #df6000; 53 | border:1px #df5000 solid; 54 | border-radius: .5rem; 55 | } 56 | -------------------------------------------------------------------------------- /.idea/watcherTasks.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 16 | 23 | 24 | -------------------------------------------------------------------------------- /src/component/MapPath.js: -------------------------------------------------------------------------------- 1 | import React,{Component} from 'react'; 2 | import HeaterTitle from './headerTitle' 3 | import '../assets/css/mappath.css' 4 | class MapPath extends Component{ 5 | activeBtn(event){ 6 | document.getElementsByClassName('activePath')[0].className='' 7 | if (event.target.tagName == 'LI'){ 8 | event.target.className = 'activePath' 9 | }else if (event.target.tagName == 'A'){ 10 | event.target.parentNode.className = 'activePath' 11 | } 12 | } 13 | render(){ 14 | return( 15 |
16 | 17 | 23 |
24 |

25 |

26 |

27 |

28 |
29 |
30 | ) 31 | } 32 | } 33 | export default MapPath -------------------------------------------------------------------------------- /src/component/Search.js: -------------------------------------------------------------------------------- 1 | import React,{Component} from 'react'; 2 | import '../assets/css/search.css' 3 | class Search extends Component{ 4 | constructor(){ 5 | super(); 6 | this.state={ 7 | searchList:[], 8 | searchValue:'' 9 | } 10 | } 11 | componentDidMount(){ 12 | let _this = this; 13 | let point = new BMap.Point(116.404, 39.915); 14 | let search = new BMap.Autocomplete( //建立一个自动完成的对象 15 | {"input" : "searchItp" 16 | ,"location" : point 17 | }); 18 | 19 | search.addEventListener("onhighlight", function(e) { //鼠标放在下拉列表上的事件 20 | let str = ""; 21 | let _value = e.fromitem.value; 22 | let value = ""; 23 | if (e.fromitem.index > -1) { 24 | value = _value.province + _value.city + _value.district + _value.street + _value.business; 25 | } 26 | str = "FromItem
index = " + e.fromitem.index + "
value = " + value; 27 | 28 | value = ""; 29 | if (e.toitem.index > -1) { 30 | _value = e.toitem.value; 31 | value = _value.province + _value.city + _value.district + _value.street + _value.business; 32 | } 33 | str += "
ToItem
index = " + e.toitem.index + "
value = " + value; 34 | }); 35 | search.addEventListener("onconfirm", function(e) { //鼠标点击下拉列表后的事件 36 | var _value = e.item.value; 37 | let myValue = _value.province + _value.city + _value.district + _value.street + _value.business; 38 | _this.props.setPlace(myValue); 39 | searchItp.value='' 40 | }); 41 | } 42 | cleanSearch(){ 43 | searchItp.value='' 44 | } 45 | render(){ 46 | return( 47 |
48 |
49 | 50 |  51 | 52 | 53 | 56 |
57 |
58 | ) 59 | } 60 | } 61 | export default Search; -------------------------------------------------------------------------------- /src/assets/css/reset.css: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,textarea,button,img{padding: 0; margin: 0;} 3 | body{background:#fff;font-family:"微软雅黑";} 4 | blockquote:before, blockquote:after,q:before, q:after{content:'';content:none} /* 重置嵌套引用*/ 5 | fieldset,img,abbr,acronym{border: 0 none;} /* 重置fieldset（表单分组）、图片的边框为0*/ 6 | img{vertical-align:top;} /* 图片在当前行内的垂直位置 */ 7 | abbr,acronym{font-variant: normal;} 8 | legend{color:#000;} 9 | blockquote, q{quotes: none} /* 重置嵌套引用的引号类型 */ 10 | address,caption,cite,code,dfn,em,strong,th,var{font-weight: normal; font-style: normal;} /* 重置样式标签的样式 */ 11 | sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;} 12 | sup{top:-0.5em; } 13 | sub{bottom:-0.25em;} 14 | caption{display:none;} /* 重置表格标题为隐藏 */ 15 | caption,th{text-align: left;} 16 | dl,ul,ol,menu,li{list-style:none} /* 重置类表前导符号为onne,menu在HTML5中有效 */ 17 | input,button,textarea,select,optgroup,option{font-family:inherit; font-size:inherit; font-style:inherit; font-weight:inherit;}/* 输入控件字体 */ 18 | input,select,textarea,button{vertical-align:middle;outline:none;} /* 重置表单控件垂直居中*/ 19 | textarea{resize:none} 20 | input[type="submit"]{cursor: pointer;}/* 鼠标样式 */ 21 | button{border:0 none;background-color:transparent;cursor:pointer} /* 重置表单button按钮效果 */ 22 | input::-moz-focus-inner{border: 0; padding: 0;} 23 | /* 标题元素样式清除, 让标题都自定义, 适应多个系统应用 */ 24 | h1,h2,h3,h4,h5,h6{font-size: 100%;font-weight: normal;} 25 | a:link {}/* 未访问的链接 */ 26 | a:visited {}/* 已访问的链接 */ 27 | a:hover {text-decoration: underline;}/* 鼠标移动到链接上 */ 28 | a:active {}/* 选定的链接 */ 29 | del,ins,a{text-decoration:none;} 30 | a:hover,a:active,a:focus{ text-decoration:none;} /* 取消a标签点击后的虚线框 */ 31 | a:active{star:expression(this.onFocus=this.blur());} /* 设置页面文字等在拖动鼠标选中情况下的背景色与文字颜色 */ 32 | a{outline: none;transition: color 0.2s ease 0s;}/*CSS3链接秒数缓冲效果2秒*/ 33 | /* 层板块缓冲效果CSS3 transition: all 0.3s ease 0s; */ 34 | .clearfix {zoom:1} 35 | .clearfix:after {content: '\20'; display: block; clear: both;} 36 | .f_yh{font-family:"Arial, Helvetica, sans-serif";}/*f_yh为英文字体样式*/ 37 | .cursor{ cursor:pointer;} 38 | .pr{position:relative}/*相对定位*/ 39 | .pa{position:absolute}/*绝对定位*/ 40 | .fl{ float:left;}/*左浮动*/ 41 | .fr{ float:right;}/*右浮动*/ 42 | .fl,.fr{display:inline;}/*浮动后，此元素会被显示为内联元素，元素前后没有换行符*/ 43 | /*文字颜色c，背景颜色bc*/ 44 | .c1{color:#5d5d5d} 45 | .c2{color:#8f8f8f} 46 | .c3{color:#e44cea} 47 | .c4{color:#f49bff} 48 | .c5{color:#ff0000} 49 | .bc1{background:#f3f3f3} 50 | .bc2{background:#f8f8f8} 51 | .bc3{background:#ffffff} 52 | 53 | 54 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /src/assets/iconfont/iconfont.css: -------------------------------------------------------------------------------- 1 | 2 | @font-face {font-family: "iconfont"; 3 | src: url('iconfont.eot?t=1493297561781'); /* IE9*/ 4 | src: url('iconfont.eot?t=1493297561781#iefix') format('embedded-opentype'), /* IE6-IE8 */ 5 | url('iconfont.woff?t=1493297561781') format('woff'), /* chrome, firefox */ 6 | url('iconfont.ttf?t=1493297561781') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ 7 | url('iconfont.svg?t=1493297561781#iconfont') format('svg'); /* iOS 4.1- */ 8 | } 9 | 10 | .iconfont { 11 | font-family:"iconfont" !important; 12 | font-size:16px; 13 | font-style:normal; 14 | -webkit-font-smoothing: antialiased; 15 | -moz-osx-font-smoothing: grayscale; 16 | } 17 | 18 | .icon-bangzhu:before { content: "\3459"; } 19 | 20 | .icon-gengduo:before { content: "\f0013"; } 21 | 22 | .icon-liebiao:before { content: "\e613"; } 23 | 24 | .icon-fanhui:before { content: "\e607"; } 25 | 26 | .icon-guanbi:before { content: "\e6a8"; } 27 | 28 | .icon-gengduo1:before { content: "\e766"; } 29 | 30 | .icon-bofang:before { content: "\e778"; } 31 | 32 | .icon-yule:before { content: "\e66e"; } 33 | 34 | .icon-you:before { content: "\e615"; } 35 | 36 | .icon-fanhui1:before { content: "\e623"; } 37 | 38 | .icon-guanbi1:before { content: "\e636"; } 39 | 40 | .icon-aixin:before { content: "\e63d"; } 41 | 42 | .icon-weixin:before { content: "\e63b"; } 43 | 44 | .icon-icglobaltitlebar48iconfontmap:before { content: "\e609"; } 45 | 46 | .icon-gouwu:before { content: "\e683"; } 47 | 48 | .icon-geren:before { content: "\e624"; } 49 | 50 | .icon-xiuxian:before { content: "\e60d"; } 51 | 52 | .icon-aixin1:before { content: "\e61f"; } 53 | 54 | .icon-restaurant:before { content: "\e664"; } 55 | 56 | .icon-ditie:before { content: "\e625"; } 57 | 58 | .icon-iconfontzhongdian:before { content: "\e603"; } 59 | 60 | .icon-iconfontluxiandaohang:before { content: "\e62b"; } 61 | 62 | .icon-gongjiaoche:before { content: "\e657"; } 63 | 64 | .icon-qiche-copy:before { content: "\e600"; } 65 | 66 | .icon-wangba:before { content: "\e626"; } 67 | 68 | .icon-unie61d:before { content: "\e61c"; } 69 | 70 | .icon-meirong:before { content: "\e604"; } 71 | 72 | .icon-end:before { content: "\e601"; } 73 | 74 | .icon-buhang:before { content: "\e620"; } 75 | 76 | .icon-sousuo-sousuo:before { content: "\e61a"; } 77 | 78 | .icon-sousuo_sousuo:before { content: "\e602"; } 79 | 80 | .icon-wangfan:before { content: "\e73e"; } 81 | 82 | .icon-yundong:before { content: "\f02fe"; } 83 | 84 | .icon-skin:before { content: "\e8f1"; } 85 | 86 | .icon-jianshen:before { content: "\e64c"; } 87 | 88 | .icon-icon-test:before { content: "\e610"; } 89 | 90 | -------------------------------------------------------------------------------- /npm-debug.log: -------------------------------------------------------------------------------- 1 | 0 info it worked if it ends with ok 2 | 1 verbose cli [ 'C:\\Program Files\\nodejs\\node.exe', 3 | 1 verbose cli 'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js', 4 | 1 verbose cli 'run', 5 | 1 verbose cli 'dev' ] 6 | 2 info using npm@3.10.10 7 | 3 info using node@v6.10.0 8 | 4 verbose run-script [ 'predev', 'dev', 'postdev' ] 9 | 5 info lifecycle reactObj@1.0.0~predev: reactObj@1.0.0 10 | 6 silly lifecycle reactObj@1.0.0~predev: no script for predev, continuing 11 | 7 info lifecycle reactObj@1.0.0~dev: reactObj@1.0.0 12 | 8 verbose lifecycle reactObj@1.0.0~dev: unsafe-perm in lifecycle true 13 | 9 verbose lifecycle reactObj@1.0.0~dev: PATH: C:\Program Files\nodejs\node_modules\npm\bin\node-gyp-bin;E:\Learn the front\work\17.4.26\node_modules\.bin;C:\Ruby22-x64\bin;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\;C:\Program Files (x86)\Autodesk\Backburner\;C:\Program Files (x86)\Common Files\Autodesk Shared\;C:\Program Files\TortoiseSVN\bin;C:\Program Files\Git\cmd;C:\Program Files\nodejs\;C:\Users\Administrator\AppData\Roaming\npm 14 | 10 verbose lifecycle reactObj@1.0.0~dev: CWD: E:\Learn the front\work\17.4.26 15 | 11 silly lifecycle reactObj@1.0.0~dev: Args: [ '/d /s /c', 16 | 11 silly lifecycle 'webpack-dev-server --hot --inline --open --port 8001' ] 17 | 12 silly lifecycle reactObj@1.0.0~dev: Returned: code: 3221225786 signal: null 18 | 13 info lifecycle reactObj@1.0.0~dev: Failed to exec dev script 19 | 14 verbose stack Error: reactObj@1.0.0 dev: `webpack-dev-server --hot --inline --open --port 8001` 20 | 14 verbose stack Exit status 3221225786 21 | 14 verbose stack at EventEmitter. (C:\Program Files\nodejs\node_modules\npm\lib\utils\lifecycle.js:255:16) 22 | 14 verbose stack at emitTwo (events.js:106:13) 23 | 14 verbose stack at EventEmitter.emit (events.js:191:7) 24 | 14 verbose stack at ChildProcess. (C:\Program Files\nodejs\node_modules\npm\lib\utils\spawn.js:40:14) 25 | 14 verbose stack at emitTwo (events.js:106:13) 26 | 14 verbose stack at ChildProcess.emit (events.js:191:7) 27 | 14 verbose stack at maybeClose (internal/child_process.js:877:16) 28 | 14 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:226:5) 29 | 15 verbose pkgid reactObj@1.0.0 30 | 16 verbose cwd E:\Learn the front\work\17.4.26 31 | 17 error Windows_NT 6.1.7601 32 | 18 error argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "dev" 33 | 19 error node v6.10.0 34 | 20 error npm v3.10.10 35 | 21 error code ELIFECYCLE 36 | 22 error reactObj@1.0.0 dev: `webpack-dev-server --hot --inline --open --port 8001` 37 | 22 error Exit status 3221225786 38 | 23 error Failed at the reactObj@1.0.0 dev script 'webpack-dev-server --hot --inline --open --port 8001'. 39 | 23 error Make sure you have the latest version of node.js and npm installed. 40 | 23 error If you do, this is most likely a problem with the reactObj package, 41 | 23 error not with npm itself. 42 | 23 error Tell the author that this fails on your system: 43 | 23 error webpack-dev-server --hot --inline --open --port 8001 44 | 23 error You can get information on how to open an issue for this project with: 45 | 23 error npm bugs reactObj 46 | 23 error Or if that isn't available, you can get their info via: 47 | 23 error npm owner ls reactObj 48 | 23 error There is likely additional logging output above. 49 | 24 verbose exit [ 1, true ] 50 | -------------------------------------------------------------------------------- /src/component/Map.js: -------------------------------------------------------------------------------- 1 | import React,{Component} from 'react'; 2 | import '../assets/css/map.css'; 3 | import Loading from './loading' 4 | import Search from './Search' 5 | class Map extends Component{ 6 | constructor(){ 7 | super(); 8 | this.state={ 9 | map:'', 10 | isLoadingShow:true, 11 | loadingContent:'地理位置获取中...' 12 | } 13 | this.setPlace = this.setPlace.bind(this); 14 | } 15 | componentDidMount(){ 16 | let _this =this; 17 | let map = new BMap.Map('container'); 18 | this.setState({ 19 | map:map 20 | }); 21 | let point = new BMap.Point(116.404, 39.915); 22 | map.centerAndZoom(point, 14); 23 | 24 | let navigationControl = new BMap.NavigationControl({ 25 | // 靠左上角位置 26 | anchor: BMAP_ANCHOR_BOTTOM_RIGHT, 27 | // LARGE类型 28 | type: BMAP_NAVIGATION_CONTROL_LARGE, 29 | // 启用显示定位 30 | enableGeolocation: true 31 | }); 32 | let bottom_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT});// 33 | map.addControl(navigationControl); 34 | map.addControl(bottom_left_control); 35 | // 添加定位控件 36 | let geolocationControl = new BMap.GeolocationControl(); 37 | geolocationControl.addEventListener("locationSuccess", function(e){ 38 | // 定位成功事件 39 | var address = ''; 40 | address += e.addressComponent.province; 41 | address += e.addressComponent.city; 42 | address += e.addressComponent.district; 43 | address += e.addressComponent.street; 44 | address += e.addressComponent.streetNumber; 45 | }); 46 | geolocationControl.addEventListener("locationError",function(e){ 47 | // 定位失败事件 48 | alert(e.message); 49 | }); 50 | map.addControl(geolocationControl); 51 | 52 | 53 | let geolocation = new BMap.Geolocation();//自动定位 54 | geolocation.getCurrentPosition(function(r){ 55 | 56 | if(this.getStatus() == BMAP_STATUS_SUCCESS){ 57 | var mk = new BMap.Marker(r.point); 58 | map.addOverlay(mk); 59 | map.panTo(r.point); 60 | _this.setState({//卸载loading 61 | isLoadingShow:false 62 | }); 63 | } 64 | else { 65 | _this.setState({//修改提示信息 66 | loadingContent:'位置获取失败' 67 | }); 68 | setTimeout(function () {//一秒后卸载loading 69 | _this.setState({ 70 | isLoadingShow:false 71 | }); 72 | },1000) 73 | 74 | } 75 | },{enableHighAccuracy: true}); 76 | //关于状态码 77 | //BMAP_STATUS_SUCCESS 检索成功。对应数值“0”。 78 | //BMAP_STATUS_CITY_LIST 城市列表。对应数值“1”。 79 | //BMAP_STATUS_UNKNOWN_LOCATION 位置结果未知。对应数值“2”。 80 | //BMAP_STATUS_UNKNOWN_ROUTE 导航结果未知。对应数值“3”。 81 | //BMAP_STATUS_INVALID_KEY 非法密钥。对应数值“4”。 82 | //BMAP_STATUS_INVALID_REQUEST 非法请求。对应数值“5”。 83 | //BMAP_STATUS_PERMISSION_DENIED 没有权限。对应数值“6”。(自 1.1 新增) 84 | //BMAP_STATUS_SERVICE_UNAVAILABLE 服务不可用。对应数值“7”。(自 1.1 新增) 85 | //BMAP_STATUS_TIMEOUT 超时。对应数值“8”。(自 1.1 新增) 86 | 87 | // let local = new BMap.LocalSearch(map, {//结果面板 88 | // renderOptions: {map: map, panel: "placeResult"} 89 | //}); 90 | //local.search("餐饮");//关键词跳转 91 | } 92 | setPlace(myValue){ 93 | let _this =this 94 | _this.state.map.clearOverlays(); //清除地图上所有覆盖物 95 | function myFun(){ 96 | var pp = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果 97 | _this.state.map.centerAndZoom(pp, 18); 98 | _this.state.map.addOverlay(new BMap.Marker(pp)); //添加标注 99 | } 100 | let local = new BMap.LocalSearch(_this.state.map, { //智能搜索 101 | onSearchComplete: myFun 102 | }); 103 | local.search(myValue); 104 | } 105 | render(){ 106 | return( 107 |
108 | {this.state.isLoadingShow?:''} 109 |
110 |
111 | 112 |
113 | ) 114 | } 115 | } 116 | export default Map -------------------------------------------------------------------------------- /src/assets/iconfont/demo.css: -------------------------------------------------------------------------------- 1 | *{margin: 0;padding: 0;list-style: none;} 2 | /* 3 | KISSY CSS Reset 4 | 理念：1. reset 的目的不是清除浏览器的默认样式，这仅是部分工作。清除和重置是紧密不可分的。 5 | 2. reset 的目的不是让默认样式在所有浏览器下一致，而是减少默认样式有可能带来的问题。 6 | 3. reset 期望提供一套普适通用的基础样式。但没有银弹，推荐根据具体需求，裁剪和修改后再使用。 7 | 特色：1. 适应中文；2. 基于最新主流浏览器。 8 | 维护：玉伯, 正淳 9 | */ 10 | 11 | /** 清除内外边距 **/ 12 | body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */ 13 | dl, dt, dd, ul, ol, li, /* list elements 列表元素 */ 14 | pre, /* text formatting elements 文本格式元素 */ 15 | form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */ 16 | th, td /* table elements 表格元素 */ { 17 | margin: 0; 18 | padding: 0; 19 | } 20 | 21 | /** 设置默认字体 **/ 22 | body, 23 | button, input, select, textarea /* for ie */ { 24 | font: 12px/1.5 tahoma, arial, \5b8b\4f53, sans-serif; 25 | } 26 | h1, h2, h3, h4, h5, h6 { font-size: 100%; } 27 | address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */ 28 | code, kbd, pre, samp { font-family: courier new, courier, monospace; } /* 统一等宽字体 */ 29 | small { font-size: 12px; } /* 小于 12px 的中文很难阅读，让 small 正常化 */ 30 | 31 | /** 重置列表元素 **/ 32 | ul, ol { list-style: none; } 33 | 34 | /** 重置文本格式元素 **/ 35 | a { text-decoration: none; } 36 | a:hover { text-decoration: underline; } 37 | 38 | 39 | /** 重置表单元素 **/ 40 | legend { color: #000; } /* for ie6 */ 41 | fieldset, img { border: 0; } /* img 搭车：让链接里的 img 无边框 */ 42 | button, input, select, textarea { font-size: 100%; } /* 使得表单元素在 ie 下能继承字体大小 */ 43 | /* 注：optgroup 无法扶正 */ 44 | 45 | /** 重置表格元素 **/ 46 | table { border-collapse: collapse; border-spacing: 0; } 47 | 48 | /* 清除浮动 */ 49 | .ks-clear:after, .clear:after { 50 | content: '\20'; 51 | display: block; 52 | height: 0; 53 | clear: both; 54 | } 55 | .ks-clear, .clear { 56 | *zoom: 1; 57 | } 58 | 59 | .main { 60 | padding: 30px 100px; 61 | width: 960px; 62 | margin: 0 auto; 63 | } 64 | .main h1{font-size:36px; color:#333; text-align:left;margin-bottom:30px; border-bottom: 1px solid #eee;} 65 | 66 | .helps{margin-top:40px;} 67 | .helps pre{ 68 | padding:20px; 69 | margin:10px 0; 70 | border:solid 1px #e7e1cd; 71 | background-color: #fffdef; 72 | overflow: auto; 73 | } 74 | 75 | .icon_lists{ 76 | width: 100% !important; 77 | 78 | } 79 | 80 | .icon_lists li{ 81 | float:left; 82 | width: 100px; 83 | height:180px; 84 | text-align: center; 85 | list-style: none !important; 86 | } 87 | .icon_lists .icon{ 88 | font-size: 42px; 89 | line-height: 100px; 90 | margin: 10px 0; 91 | color:#333; 92 | -webkit-transition: font-size 0.25s ease-out 0s; 93 | -moz-transition: font-size 0.25s ease-out 0s; 94 | transition: font-size 0.25s ease-out 0s; 95 | 96 | } 97 | .icon_lists .icon:hover{ 98 | font-size: 100px; 99 | } 100 | 101 | 102 | 103 | .markdown { 104 | color: #666; 105 | font-size: 14px; 106 | line-height: 1.8; 107 | } 108 | 109 | .highlight { 110 | line-height: 1.5; 111 | } 112 | 113 | .markdown img { 114 | vertical-align: middle; 115 | max-width: 100%; 116 | } 117 | 118 | .markdown h1 { 119 | color: #404040; 120 | font-weight: 500; 121 | line-height: 40px; 122 | margin-bottom: 24px; 123 | } 124 | 125 | .markdown h2, 126 | .markdown h3, 127 | .markdown h4, 128 | .markdown h5, 129 | .markdown h6 { 130 | color: #404040; 131 | margin: 1.6em 0 0.6em 0; 132 | font-weight: 500; 133 | clear: both; 134 | } 135 | 136 | .markdown h1 { 137 | font-size: 28px; 138 | } 139 | 140 | .markdown h2 { 141 | font-size: 22px; 142 | } 143 | 144 | .markdown h3 { 145 | font-size: 16px; 146 | } 147 | 148 | .markdown h4 { 149 | font-size: 14px; 150 | } 151 | 152 | .markdown h5 { 153 | font-size: 12px; 154 | } 155 | 156 | .markdown h6 { 157 | font-size: 12px; 158 | } 159 | 160 | .markdown hr { 161 | height: 1px; 162 | border: 0; 163 | background: #e9e9e9; 164 | margin: 16px 0; 165 | clear: both; 166 | } 167 | 168 | .markdown p, 169 | .markdown pre { 170 | margin: 1em 0; 171 | } 172 | 173 | .markdown > p, 174 | .markdown > blockquote, 175 | .markdown > .highlight, 176 | .markdown > ol, 177 | .markdown > ul { 178 | width: 80%; 179 | } 180 | 181 | .markdown ul > li { 182 | list-style: circle; 183 | } 184 | 185 | .markdown > ul li, 186 | .markdown blockquote ul > li { 187 | margin-left: 20px; 188 | padding-left: 4px; 189 | } 190 | 191 | .markdown > ul li p, 192 | .markdown > ol li p { 193 | margin: 0.6em 0; 194 | } 195 | 196 | .markdown ol > li { 197 | list-style: decimal; 198 | } 199 | 200 | .markdown > ol li, 201 | .markdown blockquote ol > li { 202 | margin-left: 20px; 203 | padding-left: 4px; 204 | } 205 | 206 | .markdown code { 207 | margin: 0 3px; 208 | padding: 0 5px; 209 | background: #eee; 210 | border-radius: 3px; 211 | } 212 | 213 | .markdown pre { 214 | border-radius: 6px; 215 | background: #f7f7f7; 216 | padding: 20px; 217 | } 218 | 219 | .markdown pre code { 220 | border: none; 221 | background: #f7f7f7; 222 | margin: 0; 223 | } 224 | 225 | .markdown strong, 226 | .markdown b { 227 | font-weight: 600; 228 | } 229 | 230 | .markdown > table { 231 | border-collapse: collapse; 232 | border-spacing: 0px; 233 | empty-cells: show; 234 | border: 1px solid #e9e9e9; 235 | width: 95%; 236 | margin-bottom: 24px; 237 | } 238 | 239 | .markdown > table th { 240 | white-space: nowrap; 241 | color: #333; 242 | font-weight: 600; 243 | 244 | } 245 | 246 | .markdown > table th, 247 | .markdown > table td { 248 | border: 1px solid #e9e9e9; 249 | padding: 8px 16px; 250 | text-align: left; 251 | } 252 | 253 | .markdown > table th { 254 | background: #F7F7F7; 255 | } 256 | 257 | .markdown blockquote { 258 | font-size: 90%; 259 | color: #999; 260 | border-left: 4px solid #e9e9e9; 261 | padding-left: 0.8em; 262 | margin: 1em 0; 263 | font-style: italic; 264 | } 265 | 266 | .markdown blockquote p { 267 | margin: 0; 268 | } 269 | 270 | .markdown .anchor { 271 | opacity: 0; 272 | transition: opacity 0.3s ease; 273 | margin-left: 8px; 274 | } 275 | 276 | .markdown .waiting { 277 | color: #ccc; 278 | } 279 | 280 | .markdown h1:hover .anchor, 281 | .markdown h2:hover .anchor, 282 | .markdown h3:hover .anchor, 283 | .markdown h4:hover .anchor, 284 | .markdown h5:hover .anchor, 285 | .markdown h6:hover .anchor { 286 | opacity: 1; 287 | display: inline-block; 288 | } 289 | 290 | .markdown > br, 291 | .markdown > p > br { 292 | clear: both; 293 | } 294 | 295 | 296 | .hljs { 297 | display: block; 298 | background: white; 299 | padding: 0.5em; 300 | color: #333333; 301 | overflow-x: auto; 302 | } 303 | 304 | .hljs-comment, 305 | .hljs-meta { 306 | color: #969896; 307 | } 308 | 309 | .hljs-string, 310 | .hljs-variable, 311 | .hljs-template-variable, 312 | .hljs-strong, 313 | .hljs-emphasis, 314 | .hljs-quote { 315 | color: #df5000; 316 | } 317 | 318 | .hljs-keyword, 319 | .hljs-selector-tag, 320 | .hljs-type { 321 | color: #a71d5d; 322 | } 323 | 324 | .hljs-literal, 325 | .hljs-symbol, 326 | .hljs-bullet, 327 | .hljs-attribute { 328 | color: #0086b3; 329 | } 330 | 331 | .hljs-section, 332 | .hljs-name { 333 | color: #63a35c; 334 | } 335 | 336 | .hljs-tag { 337 | color: #333333; 338 | } 339 | 340 | .hljs-title, 341 | .hljs-attr, 342 | .hljs-selector-id, 343 | .hljs-selector-class, 344 | .hljs-selector-attr, 345 | .hljs-selector-pseudo { 346 | color: #795da3; 347 | } 348 | 349 | .hljs-addition { 350 | color: #55a532; 351 | background-color: #eaffea; 352 | } 353 | 354 | .hljs-deletion { 355 | color: #bd2c00; 356 | background-color: #ffecec; 357 | } 358 | 359 | .hljs-link { 360 | text-decoration: underline; 361 | } 362 | 363 | pre{ 364 | background: #fff; 365 | } 366 | 367 | 368 | 369 | 370 | 371 | -------------------------------------------------------------------------------- /src/assets/iconfont/demo_fontclass.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | IconFont 7 | 8 | 9 | 10 | 11 |
12 |

IconFont 图标

13 |
    14 | 15 |
  • 16 | 17 |
    帮助
    18 |
    .icon-bangzhu
    19 |
    • 20 | 21 |
  • 22 | 23 |
    更多
    24 |
    .icon-gengduo
    25 |
    • 26 | 27 |
  • 28 | 29 |
    列表
    30 |
    .icon-liebiao
    31 |
    • 32 | 33 |
  • 34 | 35 |
    返回
    36 |
    .icon-fanhui
    37 |
    • 38 | 39 |
  • 40 | 41 |
    关闭
    42 |
    .icon-guanbi
    43 |
    • 44 | 45 |
  • 46 | 47 |
    更多
    48 |
    .icon-gengduo1
    49 |
    • 50 | 51 |
  • 52 | 53 |
    播放
    54 |
    .icon-bofang
    55 |
    • 56 | 57 |
  • 58 | 59 |
    娱乐
    60 |
    .icon-yule
    61 |
    • 62 | 63 |
  • 64 | 65 |
    下
    66 |
    .icon-you
    67 |
    • 68 | 69 |
  • 70 | 71 |
    返回
    72 |
    .icon-fanhui1
    73 |
    • 74 | 75 |
  • 76 | 77 |
    关闭
    78 |
    .icon-guanbi1
    79 |
    • 80 | 81 |
  • 82 | 83 |
    爱心
    84 |
    .icon-aixin
    85 |
    • 86 | 87 |
  • 88 | 89 |
    微信
    90 |
    .icon-weixin
    91 |
    • 92 | 93 |
  • 94 | 95 |
    地图
    96 |
    .icon-icglobaltitlebar48iconfontmap
    97 |
    • 98 | 99 |
  • 100 | 101 |
    购物
    102 |
    .icon-gouwu
    103 |
    • 104 | 105 |
  • 106 | 107 |
    个人
    108 |
    .icon-geren
    109 |
    • 110 | 111 |
  • 112 | 113 |
    休闲
    114 |
    .icon-xiuxian
    115 |
    • 116 | 117 |
  • 118 | 119 |
    爱心
    120 |
    .icon-aixin1
    121 |
    • 122 | 123 |
  • 124 | 125 |
    餐饮
    126 |
    .icon-restaurant
    127 |
    • 128 | 129 |
  • 130 | 131 |
    地铁
    132 |
    .icon-ditie
    133 |
    • 134 | 135 |
  • 136 | 137 |
    终点
    138 |
    .icon-iconfontzhongdian
    139 |
    • 140 | 141 |
  • 142 | 143 |
    路线
    144 |
    .icon-iconfontluxiandaohang
    145 |
    • 146 | 147 |
  • 148 | 149 |
    公交车
    150 |
    .icon-gongjiaoche
    151 |
    • 152 | 153 |
  • 154 | 155 |
    汽车
    156 |
    .icon-qiche-copy
    157 |
    • 158 | 159 |
  • 160 | 161 |
    网吧
    162 |
    .icon-wangba
    163 |
    • 164 | 165 |
  • 166 | 167 |
    脚
    168 |
    .icon-unie61d
    169 |
    • 170 | 171 |
  • 172 | 173 |
    美容
    174 |
    .icon-meirong
    175 |
    • 176 | 177 |
  • 178 | 179 |
    起点
    180 |
    .icon-end
    181 |
    • 182 | 183 |
  • 184 | 185 |
    步行
    186 |
    .icon-buhang
    187 |
    • 188 | 189 |
  • 190 | 191 |
    搜索-搜索
    192 |
    .icon-sousuo-sousuo
    193 |
    • 194 | 195 |
  • 196 | 197 |
    搜索_搜索
    198 |
    .icon-sousuo_sousuo
    199 |
    • 200 | 201 |
  • 202 | 203 |
    往返
    204 |
    .icon-wangfan
    205 |
    • 206 | 207 |
  • 208 | 209 |
    运动
    210 |
    .icon-yundong
    211 |
    • 212 | 213 |
  • 214 | 215 |
    皮肤
    216 |
    .icon-skin
    217 |
    • 218 | 219 |
  • 220 | 221 |
    健身
    222 |
    .icon-jianshen
    223 |
    • 224 | 225 |
  • 226 | 227 |
    周边
    228 |
    .icon-icon-test
    229 |
    • 230 | 231 |
232 | 233 |

font-class引用

234 |
235 | 236 |

font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。

237 |

与unicode使用方式相比，具有如下特点：

238 |
    239 |
  • 兼容性良好，支持ie8+，及所有现代浏览器。
    • 240 |
  • 相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。
    • 241 |
  • 因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。
    • 242 |
  • 不过因为本质上还是使用的字体，所以多色图标还是不支持的。
    • 243 |
244 |

使用步骤如下：

245 |

第一步：引入项目下面生成的fontclass代码：

246 | 247 | 248 | 
<link rel="stylesheet" type="text/css" href="./iconfont.css">
249 |

第二步：挑选相应图标并获取类名，应用于页面：

250 | 
<i class="iconfont icon-xxx"></i>
251 |
252 |

"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。

253 |
254 |
255 | 256 | 257 | -------------------------------------------------------------------------------- /src/assets/iconfont/demo_unicode.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | IconFont 7 | 8 | 9 | 29 | 30 | 31 |
32 |

IconFont 图标

33 |
    34 | 35 |
  • 36 | 㑙 37 |
    帮助
    38 |
    &#x3459;
    39 |
    • 40 | 41 |
  • 42 | 󰀓 43 |
    更多
    44 |
    &#xf0013;
    45 |
    • 46 | 47 |
  • 48 | 49 |
    列表
    50 |
    &#xe613;
    51 |
    • 52 | 53 |
  • 54 | 55 |
    返回
    56 |
    &#xe607;
    57 |
    • 58 | 59 |
  • 60 | 61 |
    关闭
    62 |
    &#xe6a8;
    63 |
    • 64 | 65 |
  • 66 | 67 |
    更多
    68 |
    &#xe766;
    69 |
    • 70 | 71 |
  • 72 | 73 |
    播放
    74 |
    &#xe778;
    75 |
    • 76 | 77 |
  • 78 | 79 |
    娱乐
    80 |
    &#xe66e;
    81 |
    • 82 | 83 |
  • 84 | 85 |
    下
    86 |
    &#xe615;
    87 |
    • 88 | 89 |
  • 90 | 91 |
    返回
    92 |
    &#xe623;
    93 |
    • 94 | 95 |
  • 96 | 97 |
    关闭
    98 |
    &#xe636;
    99 |
    • 100 | 101 |
  • 102 | 103 |
    爱心
    104 |
    &#xe63d;
    105 |
    • 106 | 107 |
  • 108 | 109 |
    微信
    110 |
    &#xe63b;
    111 |
    • 112 | 113 |
  • 114 | 115 |
    地图
    116 |
    &#xe609;
    117 |
    • 118 | 119 |
  • 120 | 121 |
    购物
    122 |
    &#xe683;
    123 |
    • 124 | 125 |
  • 126 | 127 |
    个人
    128 |
    &#xe624;
    129 |
    • 130 | 131 |
  • 132 | 133 |
    休闲
    134 |
    &#xe60d;
    135 |
    • 136 | 137 |
  • 138 | 139 |
    爱心
    140 |
    &#xe61f;
    141 |
    • 142 | 143 |
  • 144 | 145 |
    餐饮
    146 |
    &#xe664;
    147 |
    • 148 | 149 |
  • 150 | 151 |
    地铁
    152 |
    &#xe625;
    153 |
    • 154 | 155 |
  • 156 | 157 |
    终点
    158 |
    &#xe603;
    159 |
    • 160 | 161 |
  • 162 | 163 |
    路线
    164 |
    &#xe62b;
    165 |
    • 166 | 167 |
  • 168 | 169 |
    公交车
    170 |
    &#xe657;
    171 |
    • 172 | 173 |
  • 174 | 175 |
    汽车
    176 |
    &#xe600;
    177 |
    • 178 | 179 |
  • 180 | 181 |
    网吧
    182 |
    &#xe626;
    183 |
    • 184 | 185 |
  • 186 | 187 |
    脚
    188 |
    &#xe61c;
    189 |
    • 190 | 191 |
  • 192 | 193 |
    美容
    194 |
    &#xe604;
    195 |
    • 196 | 197 |
  • 198 | 199 |
    起点
    200 |
    &#xe601;
    201 |
    • 202 | 203 |
  • 204 | 205 |
    步行
    206 |
    &#xe620;
    207 |
    • 208 | 209 |
  • 210 | 211 |
    搜索-搜索
    212 |
    &#xe61a;
    213 |
    • 214 | 215 |
  • 216 | 217 |
    搜索_搜索
    218 |
    &#xe602;
    219 |
    • 220 | 221 |
  • 222 | 223 |
    往返
    224 |
    &#xe73e;
    225 |
    • 226 | 227 |
  • 228 | 󰋾 229 |
    运动
    230 |
    &#xf02fe;
    231 |
    • 232 | 233 |
  • 234 | 235 |
    皮肤
    236 |
    &#xe8f1;
    237 |
    • 238 | 239 |
  • 240 | 241 |
    健身
    242 |
    &#xe64c;
    243 |
    • 244 | 245 |
  • 246 | 247 |
    周边
    248 |
    &#xe610;
    249 |
    • 250 | 251 |
252 |

unicode引用

253 |
254 | 255 |

unicode是字体在网页端最原始的应用方式，特点是：

256 |
    257 |
  • 兼容性最好，支持ie6+，及所有现代浏览器。
    • 258 |
  • 支持按字体的方式去动态调整图标大小，颜色等等。
    • 259 |
  • 但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。
    • 260 |
261 |
262 |

注意：新版iconfont支持多色图标，这些多色图标在unicode模式下将不能使用，如果有需求建议使用symbol的引用方式

263 |
264 |

unicode使用步骤如下：

265 |

第一步：拷贝项目下面生成的font-face

266 | 
@font-face {
267 |   font-family: 'iconfont';
268 |   src: url('iconfont.eot');
269 |   src: url('iconfont.eot?#iefix') format('embedded-opentype'),
270 |   url('iconfont.woff') format('woff'),
271 |   url('iconfont.ttf') format('truetype'),
272 |   url('iconfont.svg#iconfont') format('svg');
273 | }
274 |
275 |

第二步：定义使用iconfont的样式

276 | 
.iconfont{
277 |   font-family:"iconfont" !important;
278 |   font-size:16px;font-style:normal;
279 |   -webkit-font-smoothing: antialiased;
280 |   -webkit-text-stroke-width: 0.2px;
281 |   -moz-osx-font-smoothing: grayscale;
282 | }
283 |
284 |

第三步：挑选相应图标并获取字体编码，应用于页面

285 | 
<i class="iconfont">&#x33;</i>
286 | 287 |
288 |

"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。

289 |
290 |
291 | 292 | 293 | 294 | 295 | -------------------------------------------------------------------------------- /src/assets/iconfont/demo_symbol.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | IconFont 7 | 8 | 9 | 10 | 24 | 25 | 26 |
27 |

IconFont 图标

28 |
    29 | 30 |
  • 31 | 34 |
    帮助
    35 |
    #icon-bangzhu
    36 |
    • 37 | 38 |
  • 39 | 42 |
    更多
    43 |
    #icon-gengduo
    44 |
    • 45 | 46 |
  • 47 | 50 |
    列表
    51 |
    #icon-liebiao
    52 |
    • 53 | 54 |
  • 55 | 58 |
    返回
    59 |
    #icon-fanhui
    60 |
    • 61 | 62 |
  • 63 | 66 |
    关闭
    67 |
    #icon-guanbi
    68 |
    • 69 | 70 |
  • 71 | 74 |
    更多
    75 |
    #icon-gengduo1
    76 |
    • 77 | 78 |
  • 79 | 82 |
    播放
    83 |
    #icon-bofang
    84 |
    • 85 | 86 |
  • 87 | 90 |
    娱乐
    91 |
    #icon-yule
    92 |
    • 93 | 94 |
  • 95 | 98 |
    下
    99 |
    #icon-you
    100 |
    • 101 | 102 |
  • 103 | 106 |
    返回
    107 |
    #icon-fanhui1
    108 |
    • 109 | 110 |
  • 111 | 114 |
    关闭
    115 |
    #icon-guanbi1
    116 |
    • 117 | 118 |
  • 119 | 122 |
    爱心
    123 |
    #icon-aixin
    124 |
    • 125 | 126 |
  • 127 | 130 |
    微信
    131 |
    #icon-weixin
    132 |
    • 133 | 134 |
  • 135 | 138 |
    地图
    139 |
    #icon-icglobaltitlebar48iconfontmap
    140 |
    • 141 | 142 |
  • 143 | 146 |
    购物
    147 |
    #icon-gouwu
    148 |
    • 149 | 150 |
  • 151 | 154 |
    个人
    155 |
    #icon-geren
    156 |
    • 157 | 158 |
  • 159 | 162 |
    休闲
    163 |
    #icon-xiuxian
    164 |
    • 165 | 166 |
  • 167 | 170 |
    爱心
    171 |
    #icon-aixin1
    172 |
    • 173 | 174 |
  • 175 | 178 |
    餐饮
    179 |
    #icon-restaurant
    180 |
    • 181 | 182 |
  • 183 | 186 |
    地铁
    187 |
    #icon-ditie
    188 |
    • 189 | 190 |
  • 191 | 194 |
    终点
    195 |
    #icon-iconfontzhongdian
    196 |
    • 197 | 198 |
  • 199 | 202 |
    路线
    203 |
    #icon-iconfontluxiandaohang
    204 |
    • 205 | 206 |
  • 207 | 210 |
    公交车
    211 |
    #icon-gongjiaoche
    212 |
    • 213 | 214 |
  • 215 | 218 |
    汽车
    219 |
    #icon-qiche-copy
    220 |
    • 221 | 222 |
  • 223 | 226 |
    网吧
    227 |
    #icon-wangba
    228 |
    • 229 | 230 |
  • 231 | 234 |
    脚
    235 |
    #icon-unie61d
    236 |
    • 237 | 238 |
  • 239 | 242 |
    美容
    243 |
    #icon-meirong
    244 |
    • 245 | 246 |
  • 247 | 250 |
    起点
    251 |
    #icon-end
    252 |
    • 253 | 254 |
  • 255 | 258 |
    步行
    259 |
    #icon-buhang
    260 |
    • 261 | 262 |
  • 263 | 266 |
    搜索-搜索
    267 |
    #icon-sousuo-sousuo
    268 |
    • 269 | 270 |
  • 271 | 274 |
    搜索_搜索
    275 |
    #icon-sousuo_sousuo
    276 |
    • 277 | 278 |
  • 279 | 282 |
    往返
    283 |
    #icon-wangfan
    284 |
    • 285 | 286 |
  • 287 | 290 |
    运动
    291 |
    #icon-yundong
    292 |
    • 293 | 294 |
  • 295 | 298 |
    皮肤
    299 |
    #icon-skin
    300 |
    • 301 | 302 |
  • 303 | 306 |
    健身
    307 |
    #icon-jianshen
    308 |
    • 309 | 310 |
  • 311 | 314 |
    周边
    315 |
    #icon-icon-test
    316 |
    • 317 | 318 |
319 | 320 | 321 |

symbol引用

322 |
323 | 324 |

这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 325 | 这种用法其实是做了一个svg的集合，与另外两种相比具有如下特点：

326 |
    327 |
  • 支持多色图标了，不再受单色限制。
    • 328 |
  • 通过一些技巧，支持像字体那样，通过font-size,color来调整样式。
    • 329 |
  • 兼容性较差，支持 ie9+,及现代浏览器。
    • 330 |
  • 浏览器渲染svg的性能一般，还不如png。
    • 331 |
332 |

使用步骤如下：

333 |

第一步：引入项目下面生成的symbol代码：

334 | 
<script src="./iconfont.js"></script>
335 |

第二步：加入通用css代码（引入一次就行）：

336 | 
<style type="text/css">
337 | .icon {
338 |    width: 1em; height: 1em;
339 |    vertical-align: -0.15em;
340 |    fill: currentColor;
341 |    overflow: hidden;
342 | }
343 | </style>
344 |

第三步：挑选相应图标并获取类名，应用于页面：

345 | 
<svg class="icon" aria-hidden="true">
346 |   <use xlink:href="#icon-xxx"></use>
347 | </svg>
348 |
349 |
350 | 351 | 352 | -------------------------------------------------------------------------------- /src/assets/iconfont/iconfont.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Created by FontForge 20120731 at Thu Apr 27 20:52:41 2017 6 | By admin 7 | 8 | 9 | 10 | 24 | 26 | 28 | 30 | 32 | 36 | 40 | 43 | 46 | 48 | 50 | 53 | 55 | 59 | 61 | 64 | 68 | 72 | 78 | 83 | 86 | 90 | 93 | 95 | 101 | 105 | 111 | 113 | 117 | 121 | 126 | 130 | 138 | 143 | 147 | 150 | 154 | 156 | 160 | 166 | 174 | 180 | 181 | 182 | -------------------------------------------------------------------------------- /.idea/workspace.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 15 | 16 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 141 | 142 | 143 | 144 | var 145 | 146 | 147 | let 148 | 149 | 150 | 151 | 177 | 178 | 179 | 180 | 181 | false 182 | 183 | false 184 | false 185 | 186 | 187 | true 188 | DEFINITION_ORDER 189 | 190 | 191 | 192 | 193 | 194 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | 223 | 224 | 227 | 228 | 229 | 230 | 231 | 232 | 233 | 234 | 235 | 236 | 237 | 238 | 239 | 240 | 241 | 242 | 243 | 244 | 245 | 246 | 247 | 248 | 249 | 250 | 251 | 252 | 253 | 254 | 255 | 256 | 257 | 258 | 259 | 260 | 261 | 262 | 263 | 264 | 265 | 266 | 267 | 268 | 269 | 270 | 271 | 272 | 273 | 274 | 275 | 276 | 277 | 282 | 283 | project 284 | 285 | 286 | 287 | 288 | 289 | 290 | 291 | 292 | 293 | 294 | 295 | 296 | 297 | 298 | 299 | project 300 | 301 | 302 | true 303 | 304 | 305 | 306 | DIRECTORY 307 | 308 | false 309 | 310 | 311 | 312 | 313 | 315 | 316 | 317 | 318 | 1493212036237 319 | 330 | 331 | 332 | 333 | 335 | 336 | 337 | 338 | 339 | 340 | 341 | 342 | 343 | 344 | 345 | 346 | 347 | 348 | 349 | 350 | 351 | 352 | 353 | 354 | 355 | 356 | 357 | 358 | 359 | 360 | 361 | 362 | 363 | 364 | 365 | 366 | 367 | 368 | 369 | 370 | 371 | 372 | 373 | 374 | 375 | 376 | 378 | 379 | 381 | 382 | 383 | 384 | 385 | 386 | 387 | 388 | 389 | 390 | 391 | 392 | 393 | 394 | 395 | 396 | 397 | 398 | 399 | 400 | 401 | 402 | 403 | 404 | 405 | 406 | 407 | 408 | 409 | 410 | 411 | 412 | 413 | 414 | 415 | 416 | 417 | 418 | 419 | 420 | 421 | 422 | 423 | 424 | 425 | 426 | 427 | 428 | 429 | 430 | 431 | 432 | 433 | 434 | 435 | 436 | 437 | 438 | 439 | 440 | 441 | 442 | 443 | 444 | 445 | 446 | 447 | 448 | 449 | 450 | 451 | 452 | 453 | 454 | 455 | 456 | 457 | 458 | 459 | 460 | 461 | 462 | 463 | 464 | 465 | 466 | 467 | 468 | 469 | 470 | 471 | 472 | 473 | 474 | 475 | 476 | 477 | 478 | 479 | 480 | 481 | 482 | 483 | 484 | 485 | 486 | 487 | 488 | 489 | 490 | 491 | 492 | 493 | 494 | 495 | 496 | 497 | 498 | 499 | 500 | 501 | 502 | 503 | 504 | 505 | 506 | 507 | 508 | 509 | 510 | 511 | 512 | 513 | 514 | 515 | 516 | 517 | 518 | 519 | 520 | 521 | 522 | 523 | 524 | 525 | 526 | 527 | 528 | 529 | 530 | 531 | 532 | 533 | 534 | 535 | 536 | 537 | 538 | 539 | 540 | 541 | 542 | 543 | 544 | 545 | 546 | 547 | 548 | 549 | 550 | 551 | 552 | 553 | 554 | 555 | 556 | 557 | 558 | 559 | 560 | 561 | 562 | 563 | 564 | 565 | 566 | 567 | 568 | 569 | 570 | 571 | 572 | 573 | 574 | 575 | 576 | 577 | 578 | 579 | 580 | 581 | 582 | 583 | 584 | 585 | 586 | 587 | 588 | 589 | 590 | 591 | 592 | 593 | 594 | 595 | 596 | 597 | 598 | 599 | 600 | 601 | 602 | 603 | 604 | 605 | 606 | 607 | 608 | 609 | 610 | 611 | 612 | 613 | 614 | 615 | 616 | 617 | 618 | 619 | 620 | 621 | 622 | 623 | 624 | 625 | 626 | 627 | 628 | 629 | 630 | 631 | 632 | 633 | 634 | 635 | 636 | 637 | 638 | 639 | 640 | 641 | 642 | 643 | 644 | 645 | 646 | 647 | 648 | 649 | 650 | 651 | 652 | 653 | 654 | 655 | 656 | 657 | 658 | 659 | 660 | 661 | 662 | 663 | 664 | 665 | 666 | 667 | 668 | 669 | 670 | 671 | 672 | 673 | 674 | 675 | 676 | 677 | 678 | 679 | 680 | 681 | 682 | 683 | 684 | 685 | 686 | 687 | 688 | 689 | 690 | 691 | 692 | 693 | 694 | 695 | 696 | 697 | 698 | 699 | 700 | 701 | 702 | 703 | 704 | 705 | 706 | 707 | 708 | 709 | 710 | 711 | 712 | 713 | 714 | 715 | 716 | 717 | 718 | 719 | 720 | 721 | 722 | 723 | 724 | 725 | 726 | 727 | 728 | 729 | 730 | 731 | 732 | 733 | 734 | 735 | 736 | 737 | 738 | 739 | 740 | 741 | 742 | 743 | 744 | 745 | 746 | 747 | 748 | 749 | 750 | 751 | 752 | 753 | 754 | 755 | 756 | 757 | 758 | 759 | 760 | 761 | 762 | 763 | 764 | 765 | 766 | 767 | 768 | 769 | 770 | 771 | 772 | 773 | 774 | 775 | 776 | 777 | 778 | 779 | 780 | 781 | 782 | 783 | 784 | 785 | 786 | 787 | 788 | 789 | 790 | 791 | 792 | 797 | 798 | 799 | 800 | 801 | 802 | -------------------------------------------------------------------------------- /src/assets/iconfont/iconfont.js: -------------------------------------------------------------------------------- 1 | ;(function(window) { 2 | 3 | var svgSprite = '' + 4 | '' + 5 | '' + 6 | '' + 7 | '' + 8 | '' + 9 | '' + 10 | '' + 11 | '' + 12 | '' + 13 | '' + 14 | '' + 15 | '' + 16 | '' + 17 | '' + 18 | '' + 19 | '' + 20 | '' + 21 | '' + 22 | '' + 23 | '' + 24 | '' + 25 | '' + 26 | '' + 27 | '' + 28 | '' + 29 | '' + 30 | '' + 31 | '' + 32 | '' + 33 | '' + 34 | '' + 35 | '' + 36 | '' + 37 | '' + 38 | '' + 39 | '' + 40 | '' + 41 | '' + 42 | '' + 43 | '' + 44 | '' + 45 | '' + 46 | '' + 47 | '' + 48 | '' + 49 | '' + 50 | '' + 51 | '' + 52 | '' + 53 | '' + 54 | '' + 55 | '' + 56 | '' + 57 | '' + 58 | '' + 59 | '' + 60 | '' + 61 | '' + 62 | '' + 63 | '' + 64 | '' + 65 | '' + 66 | '' + 67 | '' + 68 | '' + 69 | '' + 70 | '' + 71 | '' + 72 | '' + 73 | '' + 74 | '' + 75 | '' + 76 | '' + 77 | '' + 78 | '' + 79 | '' + 80 | '' + 81 | '' + 82 | '' + 83 | '' + 84 | '' + 85 | '' + 86 | '' + 87 | '' + 88 | '' + 89 | '' + 90 | '' + 91 | '' + 92 | '' + 93 | '' + 94 | '' + 95 | '' + 96 | '' + 97 | '' + 98 | '' + 99 | '' + 100 | '' + 101 | '' + 102 | '' + 103 | '' + 104 | '' + 105 | '' + 106 | '' + 107 | '' + 108 | '' + 109 | '' + 110 | '' + 111 | '' + 112 | '' + 113 | '' + 114 | '' + 115 | '' + 116 | '' + 117 | '' + 118 | '' + 119 | '' + 120 | '' + 121 | '' + 122 | '' + 123 | '' + 124 | '' + 125 | '' + 126 | '' + 127 | '' + 128 | '' + 129 | '' + 130 | '' + 131 | '' + 132 | '' + 133 | '' + 134 | '' + 135 | '' + 136 | '' + 137 | '' + 138 | '' + 139 | '' + 140 | '' + 141 | '' + 142 | '' + 143 | '' + 144 | '' + 145 | '' + 146 | '' + 147 | '' + 148 | '' + 149 | '' + 150 | '' + 151 | '' + 152 | '' + 153 | '' + 154 | '' + 155 | '' + 156 | '' + 157 | '' + 158 | '' + 159 | '' + 160 | '' + 161 | '' + 162 | '' + 163 | '' + 164 | '' + 165 | '' + 166 | '' + 167 | '' + 168 | '' + 169 | '' + 170 | '' + 171 | '' + 172 | '' + 173 | '' + 174 | '' + 175 | '' + 176 | '' + 177 | '' + 178 | '' + 179 | '' + 180 | '' + 181 | '' + 182 | '' + 183 | '' + 184 | '' + 185 | '' + 186 | '' + 187 | '' + 188 | '' + 189 | '' + 190 | '' + 191 | '' + 192 | '' + 193 | '' + 194 | '' + 195 | '' + 196 | '' + 197 | '' + 198 | '' + 199 | '' + 200 | '' + 201 | '' + 202 | '' + 203 | '' + 204 | '' + 205 | '' + 206 | '' + 207 | '' + 208 | '' + 209 | '' + 210 | '' + 211 | '' + 212 | '' + 213 | '' + 214 | '' + 215 | '' + 216 | '' + 217 | '' + 218 | '' + 219 | '' + 220 | '' + 221 | '' + 222 | '' + 223 | '' + 224 | '' + 225 | '' + 226 | '' + 227 | '' + 228 | '' + 229 | '' + 230 | '' + 231 | '' + 232 | '' + 233 | '' + 234 | '' + 235 | '' + 236 | '' + 237 | '' + 238 | '' + 239 | '' + 240 | '' + 241 | '' + 242 | '' + 243 | '' + 244 | '' + 245 | '' + 246 | '' + 247 | '' + 248 | '' + 249 | '' + 250 | '' + 251 | '' + 252 | '' + 253 | '' + 254 | '' + 255 | '' 256 | var script = function() { 257 | var scripts = document.getElementsByTagName('script') 258 | return scripts[scripts.length - 1] 259 | }() 260 | var shouldInjectCss = script.getAttribute("data-injectcss") 261 | 262 | /** 263 | * document ready 264 | */ 265 | var ready = function(fn) { 266 | if (document.addEventListener) { 267 | if (~["complete", "loaded", "interactive"].indexOf(document.readyState)) { 268 | setTimeout(fn, 0) 269 | } else { 270 | var loadFn = function() { 271 | document.removeEventListener("DOMContentLoaded", loadFn, false) 272 | fn() 273 | } 274 | document.addEventListener("DOMContentLoaded", loadFn, false) 275 | } 276 | } else if (document.attachEvent) { 277 | IEContentLoaded(window, fn) 278 | } 279 | 280 | function IEContentLoaded(w, fn) { 281 | var d = w.document, 282 | done = false, 283 | // only fire once 284 | init = function() { 285 | if (!done) { 286 | done = true 287 | fn() 288 | } 289 | } 290 | // polling for no errors 291 | var polling = function() { 292 | try { 293 | // throws errors until after ondocumentready 294 | d.documentElement.doScroll('left') 295 | } catch (e) { 296 | setTimeout(polling, 50) 297 | return 298 | } 299 | // no errors, fire 300 | 301 | init() 302 | }; 303 | 304 | polling() 305 | // trying to always fire before onload 306 | d.onreadystatechange = function() { 307 | if (d.readyState == 'complete') { 308 | d.onreadystatechange = null 309 | init() 310 | } 311 | } 312 | } 313 | } 314 | 315 | /** 316 | * Insert el before target 317 | * 318 | * @param {Element} el 319 | * @param {Element} target 320 | */ 321 | 322 | var before = function(el, target) { 323 | target.parentNode.insertBefore(el, target) 324 | } 325 | 326 | /** 327 | * Prepend el to target 328 | * 329 | * @param {Element} el 330 | * @param {Element} target 331 | */ 332 | 333 | var prepend = function(el, target) { 334 | if (target.firstChild) { 335 | before(el, target.firstChild) 336 | } else { 337 | target.appendChild(el) 338 | } 339 | } 340 | 341 | function appendSvg() { 342 | var div, svg 343 | 344 | div = document.createElement('div') 345 | div.innerHTML = svgSprite 346 | svgSprite = null 347 | svg = div.getElementsByTagName('svg')[0] 348 | if (svg) { 349 | svg.setAttribute('aria-hidden', 'true') 350 | svg.style.position = 'absolute' 351 | svg.style.width = 0 352 | svg.style.height = 0 353 | svg.style.overflow = 'hidden' 354 | prepend(svg, document.body) 355 | } 356 | } 357 | 358 | if (shouldInjectCss && !window.__iconfont__svg__cssinject__) { 359 | window.__iconfont__svg__cssinject__ = true 360 | try { 361 | document.write(""); 362 | } catch (e) { 363 | console && console.log(e) 364 | } 365 | } 366 | 367 | ready(appendSvg) 368 | 369 | 370 | })(window) --------------------------------------------------------------------------------