TypechoJoeTheme

老狮的梦

统计
登录
用户名
密码
/
注册
用户名
邮箱
输入密码
确认密码

给博客添加旅行记录足迹地图

老狮博主
2021-01-21
/
25 评论
/
2,019 阅读
/
623 个字
/
百度已收录
01/21
本文最后更新于2021年01月22日,已超过313天没有更新。如果文章内容或图片资源失效,请留言反馈,我会及时处理,谢谢!

很早以前就想弄一个旅行记录足迹地图的页面,看看自己到底去过多少地方。今天在百度找了好久终于找到了实现的办法。下面说下使用方法。

效果

第一部分:创建文件

新建index.html文件,放入以下代码:

<html>
    <head>
                <meta charset="UTF-8">

        <!--引入jQuery框架-->
        <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
        <!--引入jVectorMap库-->
        <script type="text/javascript" src="js/jquery-jvectormap-1.2.2.min.js"></script>
        <!--引入样式表-->
        <link href="js/jquery-jvectormap-1.2.2.css" rel="stylesheet" media="screen">


        <!--引入中国地图数据库-->
        <script type="text/javascript" src="js/jquery-jvectormap-cn-merc-en.js"></script>

        <!--引入美国地图数据库-->
        <!--script type="text/javascript" src="js/jquery-jvectormap-us-aea.js"></script-->
        <!--引入世界地图数据库-->
        <!--script type="text/javascript" src="js/jquery-jvectormap-world-mill.js"></script>

    </head>
<body style="background-color:#353535">
    <!--background-color: 地图背景颜色-->
    <div id="map" style="background-color:#353535"> </div>
    <script>
        $('#map').vectorMap({

            // 此处更改地图
            map: 'cn_merc_en',   // 中国地图
            //map: 'us_aea',     // 美国地图
            //map: 'world_mill', // 世界地图


            backgroundColor: 'transparent',
            zoomMin: 0.9, // 鼠标缩放时的最小比例
            zoomMax: 10.2, // 鼠标缩放时的最大比例
            focusOn: {
                x: 0.55,
                y: 2,
                scale: 0.9
            },
            regionStyle: {
                initial: {
                    fill: '#e5e5e5',   // 地图颜色
                    "fill-opacity": 1, // 省份(州)是否隐藏,鼠标滑动时显示; 1:显示,2:隐藏。
                    stroke: 'none',
                    "stroke-width": 0,
                    "stroke-opacity": 1
                },
                hover: {
                    fill: '#ccc',  // 鼠标滑动至某省份的高亮颜色。
                    "fill-opacity": 0.8
                },
                selected: {
                    fill: 'yellow'
                },
                selectedHover: {}
            },
            markerStyle: {
                initial: {
                    fill: '#fd8888', // 足迹位置的填充颜色
                    stroke: '#fff'   // 足迹位置的描边颜色
                },
                hover: {
                    fill: '#fd2020', // 鼠标滑动至足迹位置后的填充颜色
                    stroke: '#fff',  // 鼠标滑动至足迹位置后的描边颜色
                    "fill-opacity": 0.8
                },
            },
            markers: [ // 足迹位置

                // {latLng: [纬度(保留两位小数), 经度(保留两位小数)], name: '城市名称'},
                // 推荐查询经纬度网站:https://jingweidu.bmcx.com/

                {latLng: [36.10, 103.71], name: '兰州'},
                {latLng: [31.24, 121.50], name: '上海'},
                       
                
            ]
        });
    </script>
</html>

第二部分:更换地图

<!--引入中国地图数据库-->
        <script type="text/javascript" src="js/jquery-jvectormap-cn-merc-en.js"></script>

        <!--引入美国地图数据库-->
        <!--script type="text/javascript" src="js/jquery-jvectormap-us-aea.js"></script-->
        <!--引入世界地图数据库-->
        <!--script type="text/javascript" src="js/jquery-jvectormap-world-mill.js"></script>

上面分别是中国、美国和世界地图数据库,提前下载需要的国家地图,拷贝到 js 目录下。官方网站:http://jvectormap.com/

在 <head> 标签里引入地图数据: <script type="text/javascript" src="js/地图文件名"></script>

注意 :同时只能用一个地图库,注意不要引入多个地图数据。可以选择注释掉其他的。(如果使用中国地图就注释掉美国和世界地图)

在更改地图数据库后同时修改下面的代码:

// 此处更改地图
            map: 'cn_merc_en',   // 中国地图
            //map: 'us-aea',     // 美国地图
            //map: 'world-mill', // 世界地图

同样的,只能用一个地图库,注意不要引入多个地图数据。可以选择注释掉其他的。(如果使用中国地图就注释掉美国和世界地图)

第三部分:添加足迹

markers: [ // 足迹位置

        // {latLng: [经度(保留两位小数), 纬度(保留两位小数)], name: '城市名称'},
        // 推荐查询经纬度网站:https://jingweidu.bmcx.com/

        {latLng: [39.90, 116.41], name: '北京'},
        {latLng: [31.24, 121.50], name: '上海'},

        {latLng: [46.06, 122.06], name: '内蒙古 - 乌兰浩特'}
    ]

注意:纬度在前面,经度在后面,写错了就不会正常显示。

第四部分:嵌入博客

嵌入文章中OR独立页面

!!!
<iframe width="100%" scrolling="no" height="600" align="middle" frameborder="no"
                src="替换成你的足迹地图链接" hspace="0" vspace="0" marginheight="0"
                marginwidth="0" name="tv">
                </iframe>
!!!

第五部分:源码下载

此处内容 回复 可见

Typecho地图
朗读
赞(1)
赞赏
感谢您的支持,我会继续努力哒!
版权属于:

老狮的梦

本文链接:

https://laolion.com/archives/2473.html(转载时请注明本文出处及文章链接)

评论 (25)
  1. lndys 闲逛
    Windows 10 · Google Chrome

    前来学习一下 需要点资料

    2021-11-19 回复
  2. 安慰大王的 闲逛
    Windows 10 · Google Chrome

    哇厉害啊

    2021-11-12 回复
  3. 若非 闲逛
    Windows 7 · Google Chrome

    一直想用这个,但是洋鬼子太缺德,这个版本的没有南沙群岛地区,新版本没有台湾地区。

    2021-11-04 回复
  4. alasd 闲逛
    Windows 10 · Google Chrome

    asda2好

    2021-10-05 回复
  5. 思楠 闲逛
    Windows 10 · Google Chrome

    不错的想法

    2021-09-29 回复
  6. 粗黑长 闲逛
    Windows 10 · Google Chrome

    啥好东西呢

    2021-09-14 回复
  7. dd 闲逛
    Windows 10 · Google Chrome

    kk看

    2021-08-30 回复
  8. LX 博主
    Windows 10 · QQ Browser

    kankan看看

    2021-07-15 回复
  9. 神话2 闲逛
    Android · Google Chrome

    瞅瞅

    2021-06-21 回复
  10. 雨停之後 闲逛
    Windows 10 · Google Chrome

    下载一下.....以后用上

    2021-06-06 回复

互动读者

  • ZMR闲逛

    评论 4 次 | 文章 0 篇

  • 安慰大王的闲逛

    评论 2 次 | 文章 0 篇

  • www.ghabk.cn闲逛

    评论 2 次 | 文章 0 篇

  • 11闲逛

    评论 2 次 | 文章 0 篇

标签云

最新回复

  1. ZMR闲逛
    2021-12-01
  2. ZMR闲逛
    2021-11-27
  3. 尘世闲游闲逛
    2021-11-27
  4. Nanndy闲逛
    2021-11-26
  5. 霸道老攻闲逛
    2021-11-25