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

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

首先新建一个div

<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标签中,即:

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

结果如下:

留言

2016-11-16