今天看到 吴佳轶同学 的一篇文章,“ 教你用 jVectorMap 制作属于自己的旅行足迹 ” 书生对这个蛮感兴趣的,就加在博客的独立页面里, 吴佳轶同学 的原文教程对于应用在Typecho里表达的不是很简明,书生在这里就给大家通俗易懂的再说下。

预览图:

地图地图

源码:

我们先下载这个项目的源码

[button color="btn_black" url="https://github.com/HelloWuJiaYi/jVectorMap-Footprint"] Github [/button]

[button color="btn_primary" url="https://url.86day.com/down.php/5d7452860e13d45323bc063a0a2b0887.zip"]直链下载[/button]

我们在网站根目录新建一个名为 map 的目录,把下载源码的放到这个目录里。

独立页面:

在Typecho后台新建一个 足迹 的独立页面,写入以下代码引用


<iframe style="max-width: 100%" 
      frameborder="no" 
      border="0" 
      marginwidth="0" 
      marginheight="0" 
      width="100%" 
      height="300px" 
      src="网站链接/map">                                        
</iframe>

地图样式:

地图的主要内容在index.html,注释作者写的十分详细

经纬度:

推荐查询经纬度网站:https://jingweidu.bmcx.com/

<!--30.50是纬度   120.68是经度-->
<!--经纬度填写精确到小数点后两位就可以了-->
{latLng: [30.50, 120.68], name: '海宁'},    

更多相关前往作者原文查看
地址:http://www.wujiayi.vip/index.php/archives/52/