为何Datamaps插件无法在Tumblr博客页面显示？

核心问题定位 #

你代码里的<script src="/datamaps.world.min.js"></script>使用了本地根路径，但你的Tumblr博客服务器上并不存在这个文件，导致地图核心脚本未加载，最终无法渲染出地图内容。

修复步骤 #

• 替换Datamaps脚本的CDN地址
  将本地路径改为公开CDN链接，确保脚本能正常加载：

  <script src="//cdnjs.cloudflare.com/ajax/libs/datamaps/0.5.8/datamaps.world.min.js"></script>
  

• （可选）确保DOM就绪后执行初始化代码
  虽然容器元素在脚本之前，但为避免潜在的DOM加载顺序问题，可将初始化代码包裹在DOM加载完成事件中：

  <script>
  document.addEventListener('DOMContentLoaded', function() {
      var map = new Datamap({element: document.getElementById('container')});
  });
  </script>
  

• 完整修复后的代码

  <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/topojson/1.6.9/topojson.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/datamaps/0.5.8/datamaps.world.min.js"></script>
  <div id="container" style="position: relative; width: 500px; height: 300px;"></div>
  <script>
  document.addEventListener('DOMContentLoaded', function() {
      var map = new Datamap({element: document.getElementById('container')});
  });
  </script>
  

验证方式 #

修改后预览页面，打开开发者工具的「控制台」标签，若没有Datamap is not defined这类报错，说明脚本加载成功，地图即可正常显示。

内容的提问来源于stack exchange，提问作者W. Han