• 当前位置:首页 > 日志 > 实现百度地图(短代码版本)
  • 博客搬到SAE了,这个还是比较省心的。不用老是为备份担心。
  • 开启友情赞助空间
  • 无聊了:[ 探索发现 ] 一下,精彩文章等着你哦!

实现百度地图(短代码版本)

2013-04-13 14:16

3,929阅览 3条评 日志 arno

经常在国外商业网站看到他们调用Google Map标注地理位置。突然也想提高点lifestyle,使用Wordpress短代码来添加很方便哟。国内的谷歌地图是使用iframe直接镶嵌的,随便搜一下也可以找到谷歌地图的WP短代码,但是不能用鼠标滚轮放大缩小(更加专业JS调用可以,不过要申请appkey,一个域名对应一个,比较麻烦)。顺便看了看百度地图API,不用申请什么appkey,而且样式按钮要比谷歌地图的要好看,底下的版权信息也干净……好吧,对我这种美化控来说,我这次选百度啊……废话少说上代码。

一、首先把百度地图API添加到收藏夹里,需要经常用到。

二、把下面的代码放到主题functions中:

function baidumap_shortcode( $atts ) {
extract(shortcode_atts(array(
'width' => '610',
'height' => '400',
'center' => '',
'zoom' => ''
), $atts));

return '<script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>
<div style="width:'.$width.'px;height:'.$height.'px;border:1px solid #ccc;" id="dituContent"></div>
<script type="text/javascript">
function initMap(){createMap(); setMapEvent();addMapControl();}function createMap(){ var map = new BMap.Map("dituContent");var point = new BMap.Point('.$center.'); map.centerAndZoom(point,'.$zoom.'); window.map = map; }function setMapEvent(){ map.enableDragging();map.enableScrollWheelZoom(); map.enableDoubleClickZoom(); map.enableKeyboard();} function addMapControl(){var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_SMALL});map.addControl(ctrl_nav);}initMap();
</script>'; }

add_shortcode('baidumap', 'baidumap_shortcode');

其中width、height数值是默认尺寸,可以根据主题来修改。
百度地图API还可以添加缩略图和比例尺等等,秉承simple is beautiful原则,我就去除掉了。想加上的自己添加一下相关JS。
百度地图API还可以添加缩略图和比例尺等等,秉承simple is beautiful原则,我就去除掉了。想加上的自己添加一下相关JS。

三、在文章中调用短代码,格式如下:

1
2
默认格式: [baidumap zoom="地图级别" center="X坐标,Y坐标"]
自定义尺寸:[baidumap zoom="地图级别" center="X坐标,Y坐标" width="400" height="300"]
本文声明

除非注明,否则文章均为 " 枫林博客 " 原创,转载时请注明文章出处。


作者信息:arno \ 2013-04-13 14:16 \ 枫林博客 \

分类标签:日志

本文地址:http://www.blogfeng.com/baidu-maps-short-code-version.html

已经有3 条评论啦
  1. #1    2013-09-08 14:56 回复TA
    米粒在线:

    有没有办法加个标注地址上去。?

发表评论

* *



​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​