实现百度地图（短代码版本）

13 4 月 2013

实现百度地图（短代码版本）

经常在国外商业网站看到他们调用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″]

枫林无线

实现百度地图（短代码版本）

3 comments