利用Leaflet的想法构建足迹地图

 1周前     5  

文章目录

    前言

    足迹地图我很早就知道咯,一直没有办法实现它,大发的地图插件Marker Pro很喜欢,但只是看看而已。直到发现了它——Leaflet,一个开源JavaScript库,适用于适合移动设备的交互式地图。
    只不过我的博客在国内,想着多一事不如少一事,图源换成国内的应该好点儿(我换成高德了),原理它差不多。就像博友说的,使用国外图源,一不小心,把一小块地画给国外,就是勾结外部势力了。话不多说,上教程。

    步骤

    我的想法是新建页面模版,独立页面显示。

    1、准备工作

    新建footprint.js文件,footprint.js文件应包含你的足迹点数据,上传这个文件到你主题目录的js文件里,比如:

    /wp-content/themes/your-theme/js/footprint.js

     

    footprint.js文件的内容

    const footprint = [ ["<b>银川</b><i>Yinchuan</i><a href='https://www.duanxiansen.com/84.html/'>银川镇北堡西部影视城三日游</a>", 38.46667, 106.26667], ["<b>榆中</b><i>Yuzhong</i><a href='https://www.duanxiansen.com/1303.html/'>记第一次滑雪</a>", 36.0620781, 103.8318566], ["<b>白银</b><i>Baiyin</i><a href='https://www.duanxiansen.com/1115.html/'>游黄河石林景区(公司第一次团建)</a>", 36.5340173, 104.1467575], // 添加更多点 ];

     

    2、创建自定义页面模版文件

    新建page-map.php文件,放在你的主题页面模版文件夹里。

    <?php
    /*
    Template Name: 足迹地图
    */
    
    get_header(); ?>
    
    <style>
    #map {
        width: 100%;
        max-width: 1200px; 
        height: 500px; 
        margin: 0 auto; 
    }
    </style>
    
    <div id="map" class="other-map"></div>
    
    <script src="https://webapi.amap.com/maps?v=1.4.15&key=您的高德地图API密钥"></script>
    
    <script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/js/footprint.js"></script>
    
    <script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function() {
        var map = new AMap.Map('map', {
            center: [116.397128, 39.916527],
            zoom: 4
        });
    
        if (typeof footprint !== 'undefined' && footprint.length > 0) {
            for (let i = 0; i < footprint.length; i++) {
                const [popupText, lat, lng] = footprint[i];
    
                var marker = new AMap.Marker({
                    position: new AMap.LngLat(lng, lat),
                    map: map
                });
    
                marker.on('click', function() {
                    var infoWindow = new AMap.InfoWindow({
                        content: popupText,
                        offset: new AMap.Pixel(0, -30)
                    });
                    infoWindow.open(map, marker.getPosition());
                });
            }
        } else {
            console.error('footprint array is undefined or empty');
        }
    });
    </script>
    
    <?php get_footer(); ?>

    自行申请高德地图API密钥。注意上述代码中js的路径

    /js/footprint.js"

    结尾

    过程很复杂,我简化了步骤,直接操作会很简单,不过相比较使用Leaflet,任有许多不完美之处,比如点击标记点显示文章图片,Leaflet会自动生成缩略图,而这个显示原图,所以我去掉了图片显示。鼠标滑过标记点,Leaflet会自动显示标记点文章,而这个需要点击标记点,而且点开之后需要手动关闭才能浏览下个标记点。Leaflet则不需要,随便点击空白处就关闭了。相比较,Leaflet更完美,体验感更足。

     

    版权声明:段先森 发表于 1周前,共 1931 字。
    转载请注明:利用Leaflet的想法构建足迹地图 | 三无青年

    您可能感兴趣的

    17 条评论

    • avatar

      obaby ( VIP 4 )

      中国山东
      回复

      等找时间抄作业

    • avatar

      缙哥哥 ( VIP 1 )

      中国浙江
      回复

      插个眼,我也想弄很久了

    • avatar

      网友小宋 ( VIP 6 )

      中国河南
      回复

      我看Leaflet加载是世界地图!其实也最好加载世界地图,避免一些问题

    • avatar

      皇家元林 ( VIP 2 )

      中国安徽
      回复

      可以的,经常出去玩的,可以试试点亮中国地图。

    • avatar

      Lvtu ( VIP 6 )

      中国广东
      回复

      折腾无极限,加油!
      我之前也是用GD地图,后面它不停变换使用规则,直接改用BD地图。。。

      • avatar

        段先森

        伊朗
        回复

        @Lvtu 感觉样式不太好看,哈哈

        • avatar

          Lvtu ( VIP 6 )

          中国广东
          回复

          @段先森 BD地图确实丑,刚开始选择GD就是因为那个暗黑样式我非常喜欢,结果后面改规则需要付费才可以用,再后面又改要3个月上去更新一次数据,不然直接就给你删除。。。

          • avatar

            段先森

            伊朗
            回复

            @Lvtu 哈哈,确实呀,主要是追踪就很烦

            • avatar

              Lvtu ( VIP 6 )

              中国广东

              @段先森 你那个试一下a标签前加个换下行会不会好看点, 或者试一下p标签和空格。。。

            • avatar

              Lvtu ( VIP 6 )

              中国广东

              @段先森 a标签前加个br,加了尖括号竟然直接被删除了。。。

          • avatar

            段先森

            中国甘肃
            回复

            @Lvtu 假期折腾,我昨天试了下,不太理想,你的足迹比我的精致

    • avatar

      往东行 ( VIP 1 )

      中国北京
      回复

      挺能折腾呀!!强!