在我的博客园首页,增加了一个“足迹”菜单,这是自定义的页面,足迹页面通过编辑html源代码指向了js代码,显示了地图。进入足迹编辑页面是看不到内容的,只有点击HTML才能看到内容:
可以看到源码中定义了一块地图显示区域,地图使用的是百度的echarts,自己写了一个脚本,显示自己的足迹,脚本上传到博客园的文件中。
自己的脚本源码如下:
1 // Step:3 为模块加载器配置echarts的路径,从当前页面链接到echarts.js,定义所需图表路径 2 require.config({ 3 paths: { 4 //echarts: './js/echarts' 5 echarts: 'http://echarts.baidu.com/build/dist' 6 } 7 }); 8 9 // Step:4 动态加载echarts然后在回调函数中开始使用,注意保持按需加载结构定义图表路径10 require(11 [12 'echarts',13 'echarts/chart/map'14 ],15 function (ec) {16 // --- 地图 ---17 var myChart2 = ec.init(document.getElementById('mainMap'));18 myChart2.setOption({19 tooltip: {20 trigger: 'item',21 formatter: '{b}'22 },23 series: [24 {25 name: '中国',26 type: 'map',27 mapType: 'china',28 selectedMode: 'multiple',29 itemStyle: {30 normal: {31 borderWidth: 1,32 borderColor: 'lightgreen',33 color: 'orange',34 label: {35 show: true36 }37 },38 emphasis: { // 也是选中样式39 borderWidth: 1,40 borderColor: '#fff',41 color: '#32cd32',42 label: {43 show: true,44 textStyle: {45 color: '#fff'46 }47 }48 }49 },50 data: [51 { name: '湖北', selected: true },52 { name: '北京', selected: true },53 { name: '黑龙江', selected: true },54 { name: '山东', selected: true },55 { name: '天津', selected: true },56 { name: '河北', selected: true },57 { name: '安徽', selected: true }],58 markPoint : {59 symbol:'emptyCircle',60 symbolSize : function (v){61 return 562 },63 effect : {64 show: true,65 shadowBlur : 066 },67 itemStyle:{68 normal:{69 label:{show:false}70 }71 },72 data: [73 { name: '黄冈', geoCoord: [114.46, 29.92] },74 { name: '荆州(2008.9)', geoCoord: [112.239741, 30.335165] },75 { name: '武汉(2009.1)', geoCoord: [114.31, 30.52] },76 { name: '北京(2011.7)', geoCoord: [116.46, 39.92] },77 { name: '大庆(2011.10)', geoCoord: [125.03, 46.58] },78 { name: '泰山(2014.6)', geoCoord: [117.13, 36.18] },79 { name: '天津(2014.8)', geoCoord: [117.2, 39.13] },80 { name: '北戴河(2014.8)', geoCoord: [119.57, 39.95]},81 { name: '安庆(2015.2)', geoCoord: [116.63,30.41]}82 ]83 }84 }85 ]86 });87 }88 );
首页的足迹链接是修改首页显示,链接到这个页面的。
通过本例,可以实现自定义页面,自由实现效果。
相关文章可以参考:
http://www.cnblogs.com/yangtze-yufei/p/6367096.html