hexo网页调用百度地图 JS API

警告
需要跳过hexo对百度地图 html 文件的渲染。如不跳过，地图显示为多个方格拼合形式，且方格间存在较宽灰缝，无法准确标地点。

因此，将百度地图 API 生成的代码放入单独 html 文件，使用 iframe 嵌套在hexo网页中。

另外推荐一下主动推送Hexo博客新链接至谷歌、必应、百度搜索引擎站长平台以提升网站收录质量和速度的插件hexo-submit-urls-to-search-engine，现在我的一篇文章刚发布5分钟，即可在必应搜索到

回到主题。

嵌入百度地图

警告
实际测试时，此法有bug,请谨慎尝试。
解决方案请继续阅读。

使用百度地图 API 生成好要标记的地方。保存代码为.html 文件，注意文件编码需为 UTF-8。编辑该 HTML 文件，去掉标签中的废话，并将 div 的宽度改为 100%，高度改为自己需要的高度。

将 html 文件复制到文章对应的资源文件夹中，命名为 map.html，并在 markdown 中直接编写 html 代码，推荐 height 比 html 文件内的 height 多 20 左右。

1	<iframe width\="100%" height\="420px" frameborder\="0" src\="{% asset\_path map.no\-render.html %}" />

警告
hexo .md文件实际测试时，地图后面的文本全部无法显示。
解决方案请继续阅读。

Hexo 用户

需要跳过对百度地图 html 文件的渲染。

另一种 iframe 引用方式：

此处链接相对网址，而非html文件

1	{% iframe /map.html 100% 520px %}

显示如下：

支持 SSL 访问

如果你的博客使用 https 访问，那么还需要在 html 文件中，将 js 引用改为 https，同时在密钥后面加上 &s=1。

1	<script src\="https://api.map.baidu.com/api?v=2.0&ak=你的密钥&s=1"\>script\>

调用百度地图api 去掉地图左下角LOGO或文字

注意，这里style的添加针对的是嵌入hexo的map.html，而非文章显示网页

去掉文字那行，添加CSS即可

1	.BMap_cpyCtrl {display:none;}

去掉地图那行，添加CSS即可

1	.anchorBL{display:none;}

地图代码

百度demo

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
		body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
		#l-map{height:100%;width:78%;float:left;border-right:2px solid #bcbcbc;}
		#r-result{height:100%;width:20%;float:left;}
	</style>
	<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=RiTOvwDlYn3P5emEiWO0MzMt8Ru0YbX8"></script>
	<title>添加多个标注点</title>
</head>
<body>
	<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
	// 百度地图API功能
	var map = new BMap.Map("allmap");
	var point = new BMap.Point(116.404, 39.915);
	map.centerAndZoom(point, 15);
	// 编写自定义函数,创建标注
	function addMarker(point){
	  var marker = new BMap.Marker(point);
	  map.addOverlay(marker);
	}
	// 随机向地图添加25个标注
	var bounds = map.getBounds();
	var sw = bounds.getSouthWest();
	var ne = bounds.getNorthEast();
	var lngSpan = Math.abs(sw.lng - ne.lng);
	var latSpan = Math.abs(ne.lat - sw.lat);
	for (var i = 0; i < 25; i ++) {
		var point = new BMap.Point(sw.lng + lngSpan * (Math.random() * 0.7), ne.lat - latSpan * (Math.random() * 0.7));
		addMarker(point);
	}
</script>

优化

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta content="text/html; charset=utf8" http-equiv="Content-Type">
    <title>百度地图API显示多个标注点带提示的代码</title>  
    <!--css-->  
    <link href="style/demo.css" rel="stylesheet" type="text/css" />  
    <!--javascript-->  
    <script src="scripts/jquery-1.9.1.js" type="text/javascript"></script>  
    <script src="scripts/demo.js" type="text/javascript"></script>  
</head>  
<body>  
    <div class="demo_main">  
        <fieldset class="demo_title">  
            百度地图API显示多个标注点带提示的代码  
        </fieldset>  
        <fieldset class="demo_content">  
            <div style="min-height: 300px; width: 100%;" id="map">  
            </div>  
            <script type="text/javascript">  
                var markerArr = [  
                    { title: "名称：广州火车站", point: "113.264531,23.157003", address: "广东省广州市广州火车站", tel: "12306" },  
                    { title: "名称：广州塔（赤岗塔）", point: "113.330934,23.113401", address: "广东省广州市广州塔（赤岗塔） ", tel: "18500000000" },  
                    { title: "名称：广州动物园", point: "113.312213,23.147267", address: "广东省广州市广州动物园", tel: "18500000000" },  
                    { title: "名称：天河公园", point: "113.372867,23.134274", address: "广东省广州市天河公园", tel: "18500000000" }  
  
                ];  
  
                function map_init() {  
                    var map = new BMap.Map("map"); // 创建Map实例  
                    var point = new BMap.Point(113.312213, 23.147267); //地图中心点，广州市  
                    map.centerAndZoom(point, 13); // 初始化地图,设置中心点坐标和地图级别。  
                    map.enableScrollWheelZoom(true); //启用滚轮放大缩小  
                    //向地图中添加缩放控件  
                    var ctrlNav = new window.BMap.NavigationControl({  
                        anchor: BMAP_ANCHOR_TOP_LEFT,  
                        type: BMAP_NAVIGATION_CONTROL_LARGE  
                    });  
                    map.addControl(ctrlNav);  
  
                    //向地图中添加缩略图控件  
                    var ctrlOve = new window.BMap.OverviewMapControl({  
                        anchor: BMAP_ANCHOR_BOTTOM_RIGHT,  
                        isOpen: 1  
                    });  
                    map.addControl(ctrlOve);  
  
                    //向地图中添加比例尺控件  
                    var ctrlSca = new window.BMap.ScaleControl({  
                        anchor: BMAP_ANCHOR_BOTTOM_LEFT  
                    });  
                    map.addControl(ctrlSca);  
  
                    var point = new Array(); //存放标注点经纬信息的数组  
                    var marker = new Array(); //存放标注点对象的数组  
                    var info = new Array(); //存放提示信息窗口对象的数组  
                    for (var i = 0; i < markerArr.length; i++) {  
                        var p0 = markerArr[i].point.split(",")[0]; //  
                        var p1 = markerArr[i].point.split(",")[1]; //按照原数组的point格式将地图点坐标的经纬度分别提出来  
                        point[i] = new window.BMap.Point(p0, p1); //循环生成新的地图点  
                        marker[i] = new window.BMap.Marker(point[i]); //按照地图点坐标生成标记  
                        map.addOverlay(marker[i]);  
                        marker[i].setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画  
                        var label = new window.BMap.Label(markerArr[i].title, { offset: new window.BMap.Size(20, -10) });  
                        marker[i].setLabel(label);  
                        info[i] = new window.BMap.InfoWindow("<p style=’font-size:12px;lineheight:1.8em;’>" + markerArr[i].title + "</br>地址：" + markerArr[i].address + "</br> 电话：" + markerArr[i].tel + "</br></p>"); // 创建信息窗口对象  
                    }  
                    marker[0].addEventListener("mouseover", function () {  
                        this.openInfoWindow(info[0]);  
                    });  
                    marker[1].addEventListener("mouseover", function () {  
                        this.openInfoWindow(info[1]);  
                    });  
                    marker[2].addEventListener("mouseover", function () {  
                        this.openInfoWindow(info[2]);  
                    });  
                }  
                //异步调用百度js  
                function map_load() {  
                    var load = document.createElement("script");  
                    load.src = "http://api.map.baidu.com/api?v=1.4&callback=map_init";  
                    document.body.appendChild(load);  
                }  
                window.onload = map_load;  
            </script>  
        </fieldset>  
    </div>  
</body>  
</html>