在网页中嵌入百度地图

发表于 更新于 分类于 Waline： 阅读次数： 本文字数： 798 阅读时长 ≈ 2 分钟

　　使用百度地图API生成的代码是拥有<head>和<body>标签的完成html文件，因此需要使用iframe嵌套在网页中。

嵌入百度地图

　　使用百度地图API生成好要标记的地方。保存代码为.html文件，注意文件编码需为UTF-8。编辑该HTML文件，去掉<p>标签中的废话，并将div的宽度改为100%，高度改为自己需要的高度。

　　将html文件复制到文章对应的资源文件夹中，命名为map.html，并在markdown中直接编写html代码，推荐height比html文件内的height多20左右。

1
 
<iframe width="100%" height="420px" frameborder="0" src="{% asset_path map.no-render.html %}" />
Hexo用户

　　编辑_config.yml文件，增加配置，并修改地图文件名为map.no-render.html，跳过对百度地图html文件的渲染。

1
2
 
skip_render:
  - "**/*.no-render*"

　　另一种iframe引用方式，不过此时就不能使用asset_path标签了：

1
 
{% iframe /posts/7a624fc3/map.no-render.html 100% 420px %}

支持SSL访问

　　如果你的博客使用https访问，那么还需要在html文件中，将js引用改为https，同时在密钥后面加上&s=1。

1
 
<script src="https://api.map.baidu.com/api?v=2.0&ak=你的密钥&s=1"></script>

嵌入测试