分享:在文章中添加地图

插件开发及发布

版主: woniou

回复
Lopwon
帖子: 173
注册时间: 2016年 11月 14日 11:19

分享:在文章中添加地图

帖子 Lopwon »

有些文章需要使用到地图,比如题主博客中的“有声”分类下的文章,例如 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.html
:P
回复