百度地图 API 制作足迹地图教程升级版

一、使用百度地图 API 的原因

之前一直在用 Robert Harm 开发我翻译的 Maps Marker Pro 插件，优点是极其强大，想要的各种功能都有了，但缺点也很明显，由于众所周知的原因，国内谷歌地图处于残废状态，OpenStreetMap 卡得要命，必应地图简陋又龟速，导致加载了 Mapsmarker 的页面响应极其缓慢，整合多个地图的页面尤其糟糕，严重影响使用体验。

感谢 @随望淡思 ，他的博文《用百度地图 API 做个人足迹地图教程》给了我不少启发，进而使用百度地图 API 重做了 “足迹” 页面，达到了自己想要的效果。

二、代码及修订

原始代码及安装过程见 @随望淡思 文，不再赘述。使用过程中发现一些问题和不足，综合查阅百度地图 API 后逐个解决。特分享如下：

1、在网速较慢，图片未加载时，生成的信息框高度比图片的总高度小，导致图片部分被隐藏。

此问题百度地图官方文档有写。代码如下：

marker.addEventListener("click", function() {
	infoWindow.setContent(content);
		this.openInfoWindow(infoWindow);
		document.getElementById('imgDemo').onload = function (){
			infoWindow.redraw(); //即 onload 时重绘弹出窗口
		}	
});

2、如何在同一个页面加载双地图？

解决方法百度地图官方也有说明，但比较简略。我自己整理的代码如下：

（1）<body></body> 中插入两个层：

<div id="map1_container" >
	<h2 class="post-title" style="text-align:center">World</h2>
	<div id="allmap1"></div>
</div>
<hr>
<div id="map2_container">
	<h2 class="post-title" style="text-align:center">China</h2>
	<div id="allmap2"></div>
</div>

（2）</html> 下方插入 js：

<script type = "text/javascript" >
	/* 创建 Map1 */
	var map1 = new BMap.Map("allmap1"); //创建 Map 实例 1
	var point1 = new BMap.Point(8.858654,20.426204); //创建点坐标
	var mapType1 = new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP,BMAP_HYBRID_MAP],anchor: BMAP_ANCHOR_TOP_RIGHT}); //创建普通 2D 地图和卫星地图，放置在右上角
	var overView1 = new BMap.OverviewMapControl(); //增加放大缩小及平移控件
	var overViewOpen1 = new BMap.OverviewMapControl({isOpen:true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT});
	map1.centerAndZoom(point1, 1); //初始化地图, 设置中心点坐标和地图级别

	/* 创建 Map2 */
	var map2 = new BMap.Map("allmap2"); //创建 Map 实例 2
	var point2 = new BMap.Point(106.744719,34.308185); //创建点坐标
	var mapType2 = new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP,BMAP_HYBRID_MAP],anchor: BMAP_ANCHOR_TOP_RIGHT}); //创建普通 2D 地图和卫星地图，放置在右上角
	var overView2 = new BMap.OverviewMapControl(); //增加放大缩小及平移控件
	var overViewOpen2 = new BMap.OverviewMapControl({isOpen:true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT});
	map2.centerAndZoom(point2, 5); //初始化地图, 设置中心点坐标和地图级别
</script>

3、如何一键回到最初的位置？

读者在点了几个地标后容易迷失方向，想要回到最初的位置，只能鼠标滚半天……解决方法是在图上增加一个自定义控件 “⊕” 并加入如下代码。

/* 定义一个控件实现点击后回到原位置 Map1 */
function ZoomControl1(){    
	//设置默认停靠位置和偏移量  
	this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;    
	this.defaultOffset = new BMap.Size(23, 210);    
}    
//通过 JavaScript 的 prototype 属性继承于 BMap.Control   
ZoomControl1.prototype = new BMap.Control();
//自定义控件必须实现 initialize 方法，并且将控件的 DOM 元素返回   
//在本方法中创建个 div 元素作为控件的容器，并将其添加到地图容器中   
ZoomControl1.prototype.initialize = function(map1){    
	//创建一个 DOM 元素
	var div = document.createElement("div");    
	//添加文字说明    
	div.appendChild(document.createTextNode("⊕"));
	//设置样式
	div.style.color = "#4369d0";
	div.style.cursor = "pointer";    
	div.style.border = "1px solid gray";    
	div.style.backgroundColor = "whitesmoke";    
	//绑定事件   
	div.onclick = function(e){  
		map1.reset(); //reset 图层为原始位置
	}    
	//添加 DOM 元素到地图中   
	map1.getContainer().appendChild(div);    
	//将 DOM 元素返回  
	return div;    
}
//创建控件实例    
var myZoomCtrl1 = new ZoomControl1();

然后在创建 Map 的时候加上：

map1.addControl(myZoomCtrl1);  //自定义控件添加到地图当中

4、怎样使用自定义图标？

百度地图官方文档如下：

function addMarker(point, index){  //创建图标对象   
    var myIcon = new BMap.Icon("markers.png", new BMap.Size(23, 25), {    
        //指定定位位置。   
        //当标注显示在地图上时，其所指向的地理位置距离图标左上    
        //角各偏移 10 像素和 25 像素。您可以看到在本例中该位置即是   
        //图标中央下端的尖角位置。    
        anchor: new BMap.Size(10, 25),    
        //设置图片偏移。   
        //当您需要从一幅较大的图片中截取某部分作为标注图标时，您   
        //需要指定大图的偏移位置，此做法与 css sprites 技术类似。    
        imageOffset: new BMap.Size(0, 0 - index * 25)   // 设置图片偏移    
    });      
    //创建标注对象并添加到地图   
    var marker = new BMap.Marker(point, {icon: myIcon});    
    map.addOverlay(marker);    
}

如果想要稍复杂一点，比如 “我去过的地方用默认图标，我想去的地方用自定义图标”，我的代码如下：

var pt = new BMap.Point(lng, lat);
var myIcon = new BMap.Icon("icon/baiduOrangeIcon.png", new BMap.Size(20,28), {anchor: new BMap.Size(10, 28), infoWindowAnchor: new BMap.Size(10, 0)});  //自定义标注图标，注意添加 anchor、infoWindowAnchor 消除偏移
if(name.indexOf("想去") == -1) { //此处是在地标名字中加了 “（想去）” 二字，凡是有此二字的，判定为想去的地方并加载自定义图标
	var marker = new BMap.Marker(pt); //创建标注
	map1.addOverlay(marker); //将标注添加到地图中
}
else {
	var marker = new BMap.Marker(pt,{icon:myIcon}); //自定义创建标注
	map1.addOverlay(marker); //将标注添加到地图中
}

5、原代码里，文章超链接、图片都为空时出现错误图标。

解决方法：添加两段 if-else 函数。

if (web != 0) 
	var webtxt = "<a style='color:#888' href="+web+">"+name+"</a>"; //如果地名有超链接到文章，显示之
else
	var webtxt = name; //否则只显示地名
if (pic1 != 0)
	var content = "<div style='font-size:14px;max-width:220px;word-wrap:break-word;overflow:visible'><img src="+pic1+" style='width:220px;' id='imgDemo'><p/>"+webtxt+"<p/>"+year+"</div>"; //如果有图片，显示之
else
	var content = "<div style='min-height:100%;max-width:220px;font-size:14px'>"+webtxt+"<p/>"+year+"</div>"; //否则不显示，解决<img src="空"> 时显示错误的问题

6、设置地标阴影及动画

阴影：

var pt = new BMap.Point(lng, lat);
var myIcon = new BMap.Icon("/icon/baiduBlueIcon.png", new BMap.Size(20,28), {anchor: new BMap.Size(10, 28), infoWindowAnchor: new BMap.Size(10, 0)});
var shadow1 = new BMap.Icon("/icon/shadow.png", new BMap.Size(20,28), {anchor: new BMap.Size(8, 26)});
var marker = new BMap.Marker(pt,{icon:myIcon, shadow:shadow1});

动画：

marker.addEventListener("click", function() {
	marker.setAnimation(BMAP_ANIMATION_DROP);
}

7、设置省份高亮 [2019/4/30 更新]

有简单办法也有复杂办法。这里只举最简单的例子。

/* 创建高亮省份 */
madeBoundary();

//区域图
function madeBoundary() {
    var datas = new Array("北京","上海","广东","江苏");
        var bdary = new BMap.Boundary();
        for(var i=0;i<datas.length;i++){
        getBoundary1(datas[i],bdary);
        }
}

//设置省份区域图
function getBoundary1(data,bdary){    
    data = data.split("-");
        bdary.get(data[0], function(rs){ //获取行政区域
            var count = rs.boundaries.length; //行政区域的点有多少个
            var pointArray = [];
            for (var i = 0; i < count; i++) {
                var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 2, strokeColor: "#ff0000",fillOpacity:0.5,fillColor:"#fbd8d8"}); //建立多边形覆盖物
                map2.addOverlay(ply);  //添加覆盖物
            }              
    }); 
}

三、百度足迹地图优缺点

优点：

  1. 加载速度飞快。
  2. 可使用百度地图坐标拾取系统搜索中文地名获取经纬度，偏僻的地儿也能秒找，非常方便。
  3. 配色清新，与 “不存在” 的谷歌地图有 “异曲同工” 之妙。

缺点：

  1. 手工修改页面新增地名的方法非常原始。像我一样有上百个地标的，简直做到要怀疑人生。
  2. 国外地名全部抓瞎，地标严重不全。

四、两种足迹地图的对比

目前最好用也是最全面的足迹地图插件仍然非 Mapsmarker 莫属，建议有需要的博主至此处下载。

对速度有需求、主要行踪集中在国内且有一定 JS 代码基础的博主，可选用百度地图的代码并自己制作。

Mapsmarker 截屏：

Mapsmarker
Mapsmarker

百度地图截屏：

Baidu Map
Baidu Map

[2019/6/23] 昨晚开始百度地图开始限制最大视图：

限制了最大视图后的世界地图
限制了最大视图后的世界地图

真的好恶心啊！换回 Mapsmarker！

Maps Marker[3]百度地图[7]足迹[7] 204阅 / 8评 / 0赞

共有 8 条评论

向Yan进行回复 取消回复

电子邮件地址不会被公开。 必填项已用*标注