有些文章需要使用到地图，比如题主博客中的“有声”分类下的文章，例如 http://www.lopwon.com/1925.html
可以通过以下介绍的方法，添加！
一、在主题适当位置（比如footer.php末端）添加以下百度地图开放平台提供的服务代码。其中，把“我的秘钥”四个字替换为自己的百度地图API秘钥（AK），申请如下：
1. 访问百度地图开放平台 https://lbsyun.baidu.com/ 注册后登陆“控制台”。
2. 应用管理》我的应用》创建应用，需要实名认证！
3. 除“应用类型”选择“浏览器端”外，其他可以默认。
4. 完成创建后，会生成一串API秘钥（AK）。
代码：
<script src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=我的秘钥"></script>
<script>
var map = new BMapGL.Map('map'); //创建地图，map对应div中的ID，可自定义，必选
map.centerAndZoom(new BMapGL.Point(<?php $this->fields->location(); ?>), 13); //设置地图中心坐标location和缩放级别13，必选
var marker = new BMapGL.Marker(new BMapGL.Point(<?php $this->fields->location(); ?>)); //创建标记坐标location，必选
map.addOverlay(marker); //添加标记点，必选
map.enableScrollWheelZoom(true); //添加鼠标滚轮缩放控件，可选
map.addControl(new BMapGL.NavigationControl({type: BMAP_NAVIGATION_CONTROL_SMALL})); //添加放大缩小控件，可选
map.addControl(new BMapGL.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP,BMAP_SATELLITE_MAP,BMAP_HYBRID_MAP]})); //添加地图类型，可选
</script>二、如果不想把以上JS在全局使用，可以使用以下代码包裹，只在需要时加载：
代码：
<?php if (($this->fields->location !== null) && ($this->is('post'))): //文章页post有自定义字段location的坐标值时加载以下JS ?>
这里是百度地图服务代码
<?php endif; ?>三、在编辑文章时，把以下代码添加到文中适当位置，当然也可以自定义CSS。如果不想每次都添加，可以直接放入主题post.php的适当位置（比如文末content）
代码：
<div id="map" style="width:720px;height:240px"></div>四、在编辑文章时，新增自定义字段location（也可以自定义字段名，注意要统一替换以上JS中所有的location）。之后，字段值填入地点坐标，可以访问拾取坐标系统 http://api.map.baidu.com/lbsapi/getpoint/index.html 获取坐标。格式为（经度,纬度），例116.403963,39.915119
五、如果觉得操作麻烦，有款现成的Typecho“我的足迹”独立页模板可以选用，功能不同是把文章直接添加到地图中，详见 http://www.lopwon.com/lopwon-footprint.html1. 访问拾取坐标系统（http://api.map.baidu.com/lbsapi/getpoint/index.html）获取坐标。
2. 在需要标记文章的自定义字段里新增字段，其中，字段名称必须填入 here，乱填无效！字段值填入之前获取的坐标。格式为（经度,纬度），例116.403963,39.915119
评论 (0)