Jimdo作为一款老牌的在线建站工具，内置的模块体系让不懂代码的用户也能快速搭建页面。不过Jimdo自带的地图模块样式比较固定，定位和缩放控制也不够灵活，不少用户更希望能嵌入一个自定义的html5地图，实现精准的坐标定位、自定义标记点和自适应的页面布局。本文就从实际操作出发，详细讲解在Jimdo中添加html5地图的完整流程，包括嵌入代码的获取、坐标的设置方法以及常见问题的处理。
一、Jimdo嵌入html5地图的原理与前置准备
Jimdo的编辑器支持多种内容模块，其中有一个专门用来放置代码的模块。在旧版Jimdo（Dolphin之前的版本）中它叫<html>模块或Widget/小工具模块，在新版Jimdo Creator中对应的是添加元素里的「更多」分类下的代码嵌入功能。无论名称如何变化，其本质都是允许你在页面中插入一段自定义的HTML代码，而html5地图正是通过这段代码以iframe或者原生脚本的方式呈现出来的。
在动手之前，建议先明确你要用的地图服务。常见的方案有百度地图、高德地图以及Google Maps，三者都提供免费的地图组件生成工具。国内用户由于网络环境原因，优先推荐百度或高德，生成速度快且访问稳定。你需要先在这些平台的开放平台注册一个开发者账号，拿到API密钥（Key），这是后续生成嵌入代码的前提。注册过程一般只需要邮箱验证，个人开发者有一定的免费配额，对普通网站展示地图来说完全够用。
另外还要考虑地图在页面中的显示尺寸。Jimdo的页面内容区域宽度有限，如果嵌入的地图写死了宽度像素值，在手机端很容易出现横向滚动条或者地图被截断的情况。所以在准备阶段就要规划好响应式方案，后面会讲到用CSS让地图容器自适应的具体写法。
二、获取html5地图嵌入代码并插入Jimdo页面
以百度地图为例，进入百度地图开放平台，找到「地图生成器」工具。在地图上搜索或点击你的目标位置，系统会自动解析出该点的经纬度坐标。接着设置地图的级别（也就是缩放程度）、标注文字、是否开启鼠标滚轮缩放等选项，全部配置完成后点击「获取代码」，页面会生成一段包含iframe的HTML代码，类似下面这样：
<iframe style="border:0; width:100%; height:300px" src="https://api.map.baidu.com/lbsapi/getpoint/index.html?qt=inf&coord=116.404,39.915&zoom=15" frameborder="0"> </iframe>
拿到代码后，回到Jimdo的页面编辑界面。在需要放置地图的位置点击添加模块，选择html/Widget模块，将刚才复制的代码原样粘贴进去，保存后切换到预览模式就能看到地图了。有一点需要注意：Jimdo的代码模块在编辑状态下通常只显示一个占位框，看不到地图实际效果，这是正常现象，不要以为插入失败而反复粘贴，一定要用预览功能确认。
如果你希望地图功能更强大，比如自定义多个标记点、绘制路线、监听点击事件，iframe方式就不够用了，需要改用JavaScript API的方式，直接在代码模块中引入地图的脚本库并初始化：
<div id="map-container" style="width:100%;height:400px;"></div>
<script type="text/javascript"
src="https://api.map.baidu.com/api?v=3.0&ak=你的API密钥"></script>
<script type="text/javascript">
// 创建地图实例，指定容器
var map = new BMap.Map("map-container");
// 设置中心点坐标和缩放级别
var point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point, 15);
// 添加标记
var marker = new BMap.Marker(point);
map.addOverlay(marker);
// 开启滚轮缩放
map.enableScrollWheelZoom(true);
</script>这种方式灵活性最高，但前提是你申请的API密钥要和网站域名绑定正确，否则浏览器控制台会报「APP不存在或被禁止」之类的错误，地图区域一片空白。
三、地图坐标的获取与设置技巧
坐标是html5地图的核心参数，直接决定地图中心点落在哪里。获取坐标最简单的办法是用坐标拾取器，百度和高德的开放平台都提供在线拾取工具，在地图上点一下目标位置，右侧立刻显示对应的经纬度。把这两个数值按「经度,纬度」的顺序填入代码即可。这里特别容易出错的一点是顺序：国内几大地图API的参数几乎都是经度在前、纬度在后，如果你按习惯先写纬度，地图会定位到完全不相干的地方，甚至显示一片海洋。
还有一个隐蔽的坑是坐标系差异。GPS设备直接读出来的原始坐标是WGS84坐标系，而百度地图使用BD09、高德使用GCJ02（火星坐标），三者之间存在偏移。如果你把车载GPS记录的坐标直接填进百度地图，位置会偏差几百米。解决办法是使用各平台官方提供的坐标转换接口，先转换再赋值：
// 高德地图坐标转换示例（GCJ02）
var convertor = new AMap.Convertor();
convertor.translate([[116.404, 39.915]], 'gps', 'gcj02', function(status, result) {
if (status === 'complete') {
var converted = result.locations[0];
map.setCenter(converted);
}
});如果只是标注一个门店或公司地址，更省事的做法是不手动填坐标，而是调用地图API的地理编码服务，传入中文地址字符串，由服务端解析出标准坐标。这样即使日后搬迁地址，改一下地址文字就行，坐标自动更新，维护成本低很多。
四、地图自适应与常见故障排查
移动端适配是Jimdo地图最容易出问题的环节。推荐的写法是给地图容器套一层外层div，宽度100%，高度用固定值或者视口单位控制，iframe本身则设置width为100%：
<div style="position:relative;width:100%;padding-bottom:56.25%;height:0;">
<iframe style="position:absolute;top:0;left:0;width:100%;height:100%;border:0;"
src="你的地图地址" frameborder="0">
</iframe>
</div>这种padding-bottom的写法可以让地图按16比9的比例随页面宽度自动伸缩，在任何设备上都不会溢出。
遇到地图不显示的情况，可以按以下顺序排查：第一，检查API密钥是否与当前域名匹配， Jimdo站点如果绑定了自己的顶级域名，密钥白名单里必须包含这个域名；第二，看浏览器控制台有没有脚本报错，跨域或协议问题（http与https混用）都会导致加载失败；第三，确认代码模块中粘贴的代码没有被编辑器转义，个别情况下重复编辑会把引号变成中文引号，导致整个脚本失效。重新粘贴一次原始代码往往就能解决。
总的来说，Jimdo添加html5地图并不复杂，关键在于选对地图平台、填准坐标并处理好响应式布局。按上面的流程操作一遍，基本十分钟内就能在页面上呈现一个定位精准、交互流畅的地图组件，为访客找到你的实际位置提供极大便利。