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

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