/ 仿翁天信网站旅行足迹地图  Resmc  xinTrip  jvectormap教程 

仿翁天信网站旅行足迹地图


    大家看过翁天信博客的应该对他网站里面的旅行足迹地图都不陌生吧!刚好我也想做这么一个

先上效果图:

xintrip.png


通过对他网站源码的分析(无法直接拿到地图的源码),看出他是用的一款叫做jvectormap的js地图插件制作的,ok,知道这么多久行了,接下来就是自己捣鼓的时候到了,首先百度“jvectormap”,进入官网,下载最新的实例工程

3ZYO5%K((67}XD~ZAM(Q2DF.png

然后从base.html网页里提取我们所需要的文件,提取的网页源码如下:


<!DOCTYPE html>

<!-- saved from url=(0047)https://blog.haloxin.me/one/index.php?c=footprint -->

<html>


<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Resmic - 我的足迹</title>

<link rel="stylesheet" media="all" href="./src/jquery-jvectormap.css">

<script src="./src/jquery-1.8.2.js"></script>

<style type="text/css" adt="123"></style>

<script src="./src/jquery-jvectormap.js"></script>

<script src="./src/jquery-mousewheel.js"></script>


<script src="./src/jvectormap.js"></script>


<script src="./src/abstract-element.js"></script>

<script src="./src/abstract-canvas-element.js"></script>

<script src="./src/abstract-shape-element.js"></script>


<script src="./src/svg-element.js"></script>

<script src="./src/svg-group-element.js"></script>

<script src="./src/svg-canvas-element.js"></script>

<script src="./src/svg-shape-element.js"></script>

<script src="./src/svg-path-element.js"></script>

<script src="./src/svg-circle-element.js"></script>

<script src="./src/svg-image-element.js"></script>

<script src="./src/svg-text-element.js"></script>


<script src="./src/vml-element.js"></script>

<script src="./src/vml-group-element.js"></script>

<script src="./src/vml-canvas-element.js"></script>

<script src="./src/vml-shape-element.js"></script>

<script src="./src/vml-path-element.js"></script>

<script src="./src/vml-circle-element.js"></script>

<script src="./src/vml-image-element.js"></script>


<script src="./src/map-object.js"></script>

<script src="./src/region.js"></script>

<script src="./src/marker.js"></script>


<script src="./src/vector-canvas.js"></script>

<script src="./src/simple-scale.js"></script>

<script src="./src/ordinal-scale.js"></script>

<script src="./src/numeric-scale.js"></script>

<script src="./src/color-scale.js"></script>

<script src="./src/legend.js"></script>

<script src="./src/data-series.js"></script>

<script src="./src/proj.js"></script>

<script src="./src/map.js"></script>


<script src="./src/jquery-jvectormap-cn-mill-en.js"></script>

<script>

$(function() {

var markers = [{

latLng: [30.490, 106.040],

name: '四川 · 南充 - 人生的起点 - 5/1995'

}, {

latLng: [22.170, 113.340],

name: '广东 · 珠海 - 第一个到达的城市 - 12/2005'

}, {

latLng: [34.170, 108.570],

name: '陕西 · 西安 - 第一次长途旅行 - 7/2008'

}, {

latLng: [34.300, 109.300],

name: '陕西 · 渭南 - 去过不一定熟悉 - 8/2011'

}, {

latLng: [33.040, 107.010],

name: '陕西 · 汉中 - 很熟悉的一个陌生的地方 - 6/2011'

}, {

latLng: [34.220, 107.090],

name: '陕西 · 宝鸡 - 感触比较深的地方 - 8/2012'

}, {

latLng: [29.350, 106.330],

name: '中国 · 重庆 - 去过次数最多的地方 - 8/2013'

}, {

latLng: [22.480, 108.190],

name: '广西 · 南宁 - 人生的第二个省会城市 - 8/2013'

}, {

latLng: [21.280, 109.070],

name: '广西 · 北海 - 大学母校的所在地 - 8/2013'

}, {

latLng: [30.400, 104.040],

name: '四川 · 成都 - 算是缘分吧 - 2/2014'

}, {

latLng: [22.380, 110.090],

name: '广西 · 玉林 - 第一次公费“出游” - 4/2014'

}, {

latLng: [39.550, 116.240],

name: '中国 · 北京 - 算“北漂”? - 6/2014'

}, {

latLng: [34.200, 108.430],

name: '陕西 · 咸阳 - 单纯的路过 - 8/2014'

}, {

latLng: [23.190, 109.240],

name: '广西 · 柳州 - 还是公费“出游” - 4/2015'

}, {

latLng: [23.080, 113.140],

name: '广东 · 广州 - 逐梦的地方 - 7/2015'

}, {

latLng: [31.360, 105.580],

name: '四川 · 阆中 - 作为南部的后花园 - 2/2016'

}, {

latLng: [22.330, 114.070],

name: '广东 · 深圳 - 人生第一次自费旅行 - 5/2016'

}, ],

values1 = [408, 512, 550, 781],

values2 = [1, 2, 3, 4],

values3 = {

'4': 'bank',

};

$('#map1').vectorMap({

map: 'cn_mill_en',

panOnDrag: false,

backgroundColor: '#A8B2CB',

markers: markers,

markerStyle: {

initial: {

fill: '#FF444E',

stroke: '#FF444E',

"fill-opacity": 1,

"stroke-width": 1,

"stroke-opacity": 1,

r: 4

},

hover: {

stroke: 'black',

"stroke-width": 2,

cursor: 'pointer'

},

selected: {

fill: 'blue'

},

selectedHover: {}

},

labels: {

render: function(code) {

var doNotShow = ['US-RI', 'US-DC'];

if (doNotShow.indexOf(code) === -1) {

return code.split('-')[1];

}

},

}

});

})

</script>


<body style="background-color: #A8B2CB;">

<!--<div style="margin-top: 30px;font-style:bold;margin-bottom:30px;width: 100%;text-align: center;font-size: 28px;color: #FFFFFF;">我的足迹 - MyFootPrint | Resmic</div>-->

<div id="map1" style="margin: auto; height: 500px;">

</div>

</body>


</html>


其实主要就是两部分,先是引入所需文件,然后创建地图,添加标注,很简单的!

效果的话可以访问:Resmic- 我的足迹,点击“分布图”就可以查看了

最后贴上源码地址:GitHub - XinTrip

发布评论

热门评论区:

  • 风筝小鸟

    风筝小鸟

    [em_Cry][em_Cry]博主,我等了半年了,啥时候能分享一下时光轴的源码呀?[em_Cry]

    • Resmic

      Resmic 回复 风筝小鸟

      好吧,等我最近忙完了,我抽离出来给你
      2017-12-24 23:08:18  回复该评论
    2017-12-23 22:13:17  回复该评论
  • 风筝小鸟

    风筝小鸟

    博主,可以分享列表源码?一直在等你回复呢,可以的话麻烦发到我邮箱,非常感谢!

    • Resmic

      Resmic 回复 风筝小鸟

      那个模块我嵌的有其他的东西,现在没有时间做分离哦
      2017-06-21 11:08:32  回复该评论
    • fengzhengxiaoniao

      fengzhengxiaoniao 回复 Resmic

      如果没有隐私的东西,不用分离也可以,我自己研究一下。如果不方便整个都给我的话,可以给我几个文件就行。
      2017-06-21 14:02:31  回复该评论
    • Resmic

      Resmic 回复 fengzhengxiaoniao

      我周末看下,
      2017-06-22 09:17:29  回复该评论
    2017-06-21 08:40:14  回复该评论
  • 风筝小鸟

    风筝小鸟

    博主你好!看了你的时光轴足迹感觉非常棒,可以分享一下源码吗?期待

    • Resmic

      Resmic 回复 风筝小鸟

      如果是地图的话你可以参考我的https://blog.haloxin.me/post/59.html 这篇文章,列表的话 我可以分享源码
      2017-06-11 11:01:27  回复该评论
    • 风筝小鸟

      风筝小鸟 回复 Resmic

      非常感谢博主!地图已经根据文章学习了,能否把列表的源码分享一下?主要想学习一下javascript和html的配合,包括上传图片、写入html,目前还是新手。
      2017-06-12 15:53:14  回复该评论
    2017-06-06 14:11:12  回复该评论
  • 访客

    访客

    请问经纬度参数latLng值是哪里获取的呢?

    • 访客

      访客 回复 访客

      经纬度可以通过百度/高德地图api接口获取到,如果你只是单纯的集成的话 可以参考我《快速在自己的网页里添加jvectormap足记地图》https://blog.haloxin.me/post/59.html这篇文章快速集成
      2016-11-13 21:42:01  回复该评论
    2016-11-08 16:22:27  回复该评论
  • 访客

    访客

    赞一个,赞一个,赞一个,

    2016-06-07 17:22:21  回复该评论