hexo网页调用百度地图 JS API

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

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

回到主题。

嵌入百度地图

警告
实际测试时,此法有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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!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>

优化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<!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>

参考资料

https://blog.csdn.net/dong_18383219470/article/details/52983771

https://blog.kuretru.com/posts/7a624fc3.html

https://bigbossjiang.top/2016/2016-11-16-Hexo-baidu-map/

http://api.map.baidu.com/lbsapi/getpoint/index.html

https://api.map.baidu.com/lbsapi/

https://blog.csdn.net/weixin_37930716/article/details/81034352

http://lbsyun.baidu.com/index.php?title=jspopular3.0

(您还可以在归档页搜索文章标题)