TypechoJoeTheme

老狮的梦

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

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

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

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

效果

第一部分:创建文件

新建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(转载时请注明本文出处及文章链接)

评论 (18)
  1. LX 博主
    Windows 10 · QQ Browser

    kankan看看

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

    瞅瞅

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

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

    2021-06-06 回复
  4. lawgeek 闲逛
    Windows 10 · Google Chrome

    多谢多谢,这个教程很详细。

    2021-05-19 回复
  5. 爱我的 闲逛
    Windows 10 · Google Chrome

    试试看

    2021-05-07 回复
  6. 往昔新语 闲逛
    Windows 10 · QQ Browser

    可以

    2021-05-07 回复
  7. 梦见 闲逛
    Windows 10 · Google Chrome

    学习一下

    2021-04-22 回复
  8. 旧云 闲逛
    Windows 10 · QQ Browser

    看看

    2021-04-18 回复
  9. source. 闲逛
    Windows 10 · Google Chrome

    没有港澳啊!

    2021-04-01 回复
  10. source. 闲逛
    Windows 10 · Google Chrome

    试试看

    2021-03-31 回复

互动读者

  • Kool闲逛

    评论 2 次 | 文章 0 篇

  • 爷爷闲逛

    评论 2 次 | 文章 0 篇

  • 老狮博主

    评论 2 次 | 文章 335 篇

  • 龙江闲逛

    评论 1 次 | 文章 0 篇

标签云

最新回复

  1. 忙碌奔波闲逛
    2021-07-27
  2. 有毒吗闲逛
    2021-07-27
  3. aa闲逛
    2021-07-27
  4. 爷爷闲逛
    2021-07-26
  5. 爷爷闲逛
    2021-07-26