博客园增加地图显示足迹

　　在我的博客园首页，增加了一个“足迹”菜单，这是自定义的页面，足迹页面通过编辑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: true
36                             }
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 5
62                 },
63                 effect : {
64                     show: true,
65                     shadowBlur : 0
66                 },
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 );

首页的足迹链接是修改首页显示，链接到这个页面的。

通过本例，可以实现自定义页面，自由实现效果。

瘦鱼

博客园增加地图显示足迹