Hexo 博文中加入百度地图

利用百度地图 API 实现在 Hexo 的博文中加入地图。

最近想丰富下生活，最先想到的就是多品尝点北京的美食。作为一个认真的人，吃过就想记下来，但只有饭馆的名字和地址显得太单调了，就想能在地图上显示的话会比较直观。搜了下百度地图的 API，不多说，直接上代码吧。更详细的内容可以参考百度地图 Javascript 的 API。

首先新建一个div：

1 2	<div style="min-height: 800px; width: 100%;" id="map"> </div>

然后利用百度地图 API 在div中填充一个地图：

<script type="text/javascript">
        // 百度地图API功能
        var map = new BMap.Map("map");    // 创建Map实例
        map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);  // 初始化地图,设置中心点坐标和地图级别
        //添加地图类型控件
        map.addControl(new BMap.MapTypeControl({
        mapTypes:[
            BMAP_NORMAL_MAP,
            BMAP_HYBRID_MAP
        ]}));
        map.setCurrentCity("北京");          // 设置地图显示的城市 此项是必须设置的
        map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
</script>

上述代码直接放在 Hexo Markdown 博文中的raw标签中，即：

1
2
3

{% raw %}
上边的代码
{% endraw %}

结果如下：

Hexo 博文中加入百度地图

留言