当前位置：首页 > 编程日记 > 正文

【百度地图API】如何制作班级地理通讯录？LBS通讯录

编程日记 2024-02-26 17:00:00

原文:【百度地图API】如何制作班级地理通讯录？LBS通讯录

摘要：班级通讯录必备的功能，比如人员列表，人员地理位置标注，展示复杂信息窗口，公交和驾车等。一般班级人员都不会超过300个，因为可以高效地把全部人员的地理位置都显示在地图上。

---------------------------------------------------------------------------

预备知识1、为啥marker数量不能超过300个？

答：由于浏览器能支持的dom元素有限，所以建议不超过该数量。

预备知识2、如果超过了300个marker，应该怎么办？

答：建议抽希（直接减少marker数量），或者只显示当前可视区域内的marker。

还有一种办法是使用麻点图。详见《麻点图制作教程》：http://www.cnblogs.com/milkmap/archive/2012/02/06/2340468.html

----------------------------------------------------------------------------

最终效果预览：http://www.ui-love.net/uiweb/cs2004/index.htm

人员列表：

交通方式：

-----------------------------------------------------------------------------

一、准备一张地图

地图初始化，就是前三句话。

然后增加地图的滚轮缩放。

最后添加一些控件。详细看地图控件类参考：http://developer.baidu.com/map/reference/index.php?title=Class:%E6%80%BB%E7%B1%BB/%E6%8E%A7%E4%BB%B6%E7%B1%BB

js代码：

//三句话初始化地图
var map = new BMap.Map("myMap");
var point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point,14);//增加滚轮缩放地图
map.enableScrollWheelZoom();//添加控件
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.ScaleControl());
map.addControl(new BMap.OverviewMapControl({isOpen: true}));
map.addControl(new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP,BMAP_HYBRID_MAP]}));

html代码：

html部分就是需要引入API1.3版本，然后增加一个地图容器就可以了。

<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script><div id="myMap"></div>

地图显示效果如下：

二、人员列表和地图标点

在地图上标一个完整的点，覆盖物部分包括了点、文字标签、信息窗口这三个部分，分别是point，marker和infowindow。

详见覆盖物类参考：http://developer.baidu.com/map/reference/index.php?title=Class:%E6%80%BB%E7%B1%BB/%E8%A6%86%E7%9B%96%E7%89%A9%E7%B1%BB

js代码：

var p17 = new BMap.Point(116.354628,39.885263);
var m17 = new BMap.Marker(p17);
var lab17 = new BMap.Label("付强",{offset:new BMap.Size(20,-10)});
map.addOverlay(m17);
m17.setLabel(lab17);
var content17 = '<div class="infowin"><p><b>付强</b></p><p>鸭子桥北里14号楼</p><p><a target="_blank" href="#">暂无微博/a></p></div><div style="float:left;margin:0 0 0 5px;"><img class="myinfopic" src="fuqiang.jpg" /></div>';
var infowin17 = new BMap.InfoWindow(content17);
m17.addEventListener("click",function(){this.openInfoWindow(infowin17);
});

html代码：

<a href="javascript:void(0);" onmouseover="m17.openInfoWindow(infowin17);" onclick="map.centerAndZoom(p17, 18);m17.openInfoWindow(infowin17);">付强</a>

效果：

如此标完班级里全部的人员。最终效果就是这样的了：

如果有些点比较密集，我们可以单独给他们列出来，使用viewport接口，以获得最佳的展示效果。比如，这7个点比较密集，我们让它单独显示。

js代码：

var ps2 = [p2,p3,p4,p5,p8,p9,p10]; //雅园
setTimeout(function(){map.setViewport(ps2);
}, 1000);

效果：

三、交通方式和鼠标右键菜单

个人觉得交通方式是最好实现的部分，因为百度地图API有强大的“结果面板”功能。就是能自动展示公交或者驾车的结果。

公交js代码：

var transit = new BMap.TransitRoute(map, {renderOptions: {map: map, panel: 'result'}});
transit.search(startPoint, endPoint);

驾车的js代码：

var driving = new BMap.DrivingRoute(map, {renderOptions:{map: map, panel: 'result', autoViewport: true}});
driving.search(startPoint, endPoint);

驾车还有一个很酷的功能，就是可以开启终点和起点可拖拽的功能，js代码：

startPoint.enableDragging();//开启起点拖拽功能
endPoint.enableDragging();//开启终点拖拽功能

html代码：

主要是有一个结果panel的容器就行。

<div id="result"></div>

鼠标右键菜单是用来选择起点和终点的，也很容易写。

百度地图API官网上有示例的：http://developer.baidu.com/map/jsdemo.htm

具体js代码是：

var startPoint;
var endPoint;
var menu = new BMap.ContextMenu();
var txtMenuItem = [{text:'选起点',callback:function(e){$('startP').innerHTML = e.lng + ',' + e.lat;startPoint = new BMap.Point(e.lng,e.lat);}},{text:'选终点',callback:function(e){$('endP').innerHTML = e.lng + ',' + e.lat;endPoint = new BMap.Point(e.lng,e.lat);}}
];
for(var i=0; i < txtMenuItem.length; i++){menu.addItem(new BMap.MenuItem(txtMenuItem[i].text,txtMenuItem[i].callback,100));
}
map.addContextMenu(menu);

效果图：

四、全部源代码部分

为了方便编写，这个示例分为了3个部分来写。分别是html，css和js。

html代码：

<!DOCTYPE HTML>
<html>
<head>
<title>中央民族大学04计算机系</title>
<link rel="stylesheet" href="base.css" type="text/css" />
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>
</head>
<body>
<div id="trafficBox" class="trafficX clearfix" style="display:none;"><a href="javascript:void(0);" onclick="btnClose();" class="btn-close"><img src="close.png" alt="关闭" title="关闭" /></a><table class="trafficTableX"><tr><td><h4>起点<span id="startP">&nbsp;</span></h4></td><td><h4>终点<span id="endP">&nbsp;</span></h4></td><td><h4>&nbsp;</h4></td></tr><tr><td><select><option>郭汀峰</option><option>王建明</option><option>姜华</option><option>曾耀文</option><option>肖国盛</option><option>许磊</option><option>杨红波</option><option>张莹</option><option>张美玉</option><option>彭俊海</option><option>卢德亮</option><option>刘炽珍</option><option>张锦媛</option><option>尚宇</option><option>田智之/吴栋霞</option><option>马海印</option><option>付强</option></select></td><td><select><option>郭汀峰</option><option>王建明</option><option>姜华</option><option>曾耀文</option><option>肖国盛</option><option>许磊</option><option>杨红波</option><option>张莹</option><option>张美玉</option><option>彭俊海</option><option>卢德亮</option><option>刘炽珍</option><option>张锦媛</option><option>尚宇</option><option>田智之/吴栋霞</option><option>马海印</option><option>付强</option></select></td><td><span class="btn"><a onclick="myBus();" href="javascript:void(0);">公交</a></span><span class="btn"><a onclick="myCar();" href="javascript:void(0);">自驾</a></span></td></tr><tr class="intro"><td>选起点：右键点击地图（下拉列表暂不可用）</td><td>选终点：右键点击地图（下拉列表暂不可用）</td><td>选择交通工具</td></tr></table>
</div>
<div class="container clearfix"><div id="btnFind" class="btn"><a href="javascript:void(0);" onclick="btnFind();">我要找人</a></div><div id="myMap" class="wider"></div><div id="sider"><div id="result" style="display:none;"></div><div id="peoplelist"><dl><dt><a href="javascript:void(0);" onclick="map.setViewport(ps2);map.closeInfoWindow();">雅园</a></dt><dd><a href="javascript:void(0);" onmouseover="m2.openInfoWindow(infowin2);" onclick="map.centerAndZoom(p2, 19);m2.openInfoWindow(infowin2);">郭汀峰</a></dd><dd><a href="javascript:void(0);" onmouseover="m3.openInfoWindow(infowin3);" onclick="map.centerAndZoom(p3, 19);m3.openInfoWindow(infowin3);">王建明</a></dd><dd><a href="javascript:void(0);" onmouseover="m4.openInfoWindow(infowin4);" onclick="map.centerAndZoom(p4, 19);m4.openInfoWindow(infowin4);">姜华</a></dd><dd><a href="javascript:void(0);" onmouseover="m5.openInfoWindow(infowin5);" onclick="map.centerAndZoom(p5, 19);m5.openInfoWindow(infowin5);">曾耀文</a></dd><dd><a href="javascript:void(0);" onmouseover="m8.openInfoWindow(infowin8);" onclick="map.centerAndZoom(p8, 19);m8.openInfoWindow(infowin8);">肖国盛</a></dd><dd><a href="javascript:void(0);" onmouseover="m9.openInfoWindow(infowin9);" onclick="map.centerAndZoom(p9, 19);m9.openInfoWindow(infowin9);">许磊</a></dd><dd><a href="javascript:void(0);" onmouseover="m10.openInfoWindow(infowin10);" onclick="map.centerAndZoom(p10, 19);m10.openInfoWindow(infowin10);">杨红波</a></dd></dl><dl><dt><a href="javascript:void(0);" onclick="map.setViewport(ps3);map.closeInfoWindow();">其他</a></dt><dd><a href="javascript:void(0);" onmouseover="m1.openInfoWindow(infowin1);" onclick="map.centerAndZoom(p1, 18);m1.openInfoWindow(infowin1);">张莹</a></dd><dd><a href="javascript:void(0);" onmouseover="m7.openInfoWindow(infowin7);" onclick="map.centerAndZoom(p7, 18);m7.openInfoWindow(infowin7);">张美玉</a></dd><dd><a href="javascript:void(0);" onmouseover="m11.openInfoWindow(infowin11);" onclick="map.centerAndZoom(p11, 18);m11.openInfoWindow(infowin11);">彭俊海</a></dd><dd><a href="javascript:void(0);" onmouseover="m14.openInfoWindow(infowin14);" onclick="map.centerAndZoom(p14, 18);m14.openInfoWindow(infowin14);">卢德亮</a></dd><dd><a href="javascript:void(0);" onmouseover="m6.openInfoWindow(infowin6);" onclick="map.centerAndZoom(p6, 18);m6.openInfoWindow(infowin6);">刘炽珍</a></dd><dd><a href="javascript:void(0);" onmouseover="m12.openInfoWindow(infowin12);" onclick="map.centerAndZoom(p12, 18);m12.openInfoWindow(infowin12);">张锦媛</a></dd><dd><a href="javascript:void(0);" onmouseover="m13.openInfoWindow(infowin13);" onclick="map.centerAndZoom(p13, 18);m13.openInfoWindow(infowin13);">尚宇</a></dd><dd><a href="javascript:void(0);" onmouseover="m15.openInfoWindow(infowin15);" onclick="map.centerAndZoom(p15, 18);m15.openInfoWindow(infowin15);">田智之/吴栋霞</a></dd><dd><a href="javascript:void(0);" onmouseover="m16.openInfoWindow(infowin16);" onclick="map.centerAndZoom(p16, 18);m16.openInfoWindow(infowin16);">马海印</a></dd><dd><a href="javascript:void(0);" onmouseover="m17.openInfoWindow(infowin17);" onclick="map.centerAndZoom(p17, 18);m17.openInfoWindow(infowin17);">付强</a></dd></dl></div></div>
</div>
<div class="footer clearfix"><p>copyright by <a target="_blank" href="http://ui-love.net">UI-LOVE</a></p>
</div>
</body>
<script type="text/javascript" src="main.js"></script>
</html>

css代码：

/** 2012-10-17 by zhangying **/
/** reset **/
body,html,div,p,dl,dd,h4{padding:0;margin:0;}
body,html{width:100%;height:100%;}
img{border:none;}
a{text-decoration:none;color:#FF7F27;}
a:hover{color:#22B14C;}
body{font-family:"微软雅黑";text-align:center;font-size:14px;background:#BDF4D7;}
img:hover{filter:alpha(opacity=90);-moz-opacity:0.9;-khtml-opacity: 0.9;opacity: 0.9;}
label{margin:0 10px 0 0;}
/** clearfix **/
.clearfix{display:block;zoom:1;}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
/** map **/
.container,.footer{margin:10px auto 0;width:1000px;}
.container{position:relative;height:600px;text-align:left;background:#fff;}
.wider,#sider{width:800px;height:100%;border:1px solid #808080;float:left;}
#sider{width:197px;border-width:1px 1px 1px 0;}
.infowin{width:200px;height:100px;float:left;}
.myinfopic{width:90px;hegiht:90px;padding:3px;border:1px solid #999;}
#peoplelist dl a{display:block;width:100%;height:30px;line-height:30px;}
#peoplelist dl a:hover{background:#4EB9C6;color:#fff;}
#peoplelist dt a{color:#fff;}
#peoplelist dt{background:#56A97D;color:#fff;text-indent:10px;}
#peoplelist dd{text-indent:20px;}
.trafficX{padding:10px;position:relative;margin:10px auto;text-align:left;border:1px solid #ccc;width:980px;background:#fff;}
.btn a{padding:5px;display:inline-block;color:#fff;background:#56A97D;-webkit-border-radius:5px;-moz-border-radius:5px;}
#btnFind{position:absolute;left:-80px;}
.btn a:hover{background:#4EB9C6;}
.btn-close{position:absolute;right:10px;}
.intro{color:#a0a0a0;font-size:12px;}
.trafficTableX td{width:320px;}
.trafficTableX input,
.trafficTableX select{width:250px;border:1px solid #ccc;padding:3px;}
.trafficTableX .btn{margin:0 10px 0 0;}
.trafficTableX .btn a{padding:5px 20px;}
.trafficTableX h4 span{font-size:12px;font-weight:400;color:red;padding:0 0 0 10px;}
#result,#peoplelist{width:100%;height:100%;}

js代码：

function $(id){return document.getElementById(id);
}
function displayBlock(id){$(id).style.display = 'block';
}
function hiddenHidden(id){$(id).style.display = 'none';
}
//close btn
function btnClose(){displayBlock('peoplelist');hiddenHidden('result');displayBlock('btnFind');hiddenHidden('trafficBox');map.clearOverlays();map.addOverlay(m1);map.addOverlay(m2);map.addOverlay(m3);map.addOverlay(m4);map.addOverlay(m5);map.addOverlay(m6);map.addOverlay(m7);map.addOverlay(m8);map.addOverlay(m9);map.addOverlay(m10);map.addOverlay(m11);map.addOverlay(m12);map.addOverlay(m13);map.addOverlay(m14);map.addOverlay(m15);map.addOverlay(m16);map.setViewport(ps1);$('startP').innerHTML = '';startPoint = null;$('endP').innerHTML = '';endPoint = null;$('sider').style.width = '197px';$('myMap').style.width = '800px';
}
//find btn
function btnFind(){displayBlock('trafficBox');hiddenHidden('btnFind');
}
//map js
//三句话初始化地图
var map = new BMap.Map("myMap");
var point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point,14);//增加滚轮缩放地图
map.enableScrollWheelZoom();//添加控件
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.ScaleControl());
map.addControl(new BMap.OverviewMapControl({isOpen: true}));
map.addControl(new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP,BMAP_HYBRID_MAP]}));var startPoint;
var endPoint;
var menu = new BMap.ContextMenu();
var txtMenuItem = [{text:'选起点',callback:function(e){$('startP').innerHTML = e.lng + ',' + e.lat;startPoint = new BMap.Point(e.lng,e.lat);}},{text:'选终点',callback:function(e){$('endP').innerHTML = e.lng + ',' + e.lat;endPoint = new BMap.Point(e.lng,e.lat);}}
];
for(var i=0; i < txtMenuItem.length; i++){menu.addItem(new BMap.MenuItem(txtMenuItem[i].text,txtMenuItem[i].callback,100));
}
map.addContextMenu(menu);//bus
function myBus(){map.clearOverlays();displayBlock('result');hiddenHidden('peoplelist');var transit = new BMap.TransitRoute(map, {renderOptions: {map: map, panel: 'result'}});transit.search(startPoint, endPoint);$('sider').style.width = '297px';$('myMap').style.width = '700px';
}
//car
function myCar(){map.clearOverlays();displayBlock('result');hiddenHidden('peoplelist');    var driving = new BMap.DrivingRoute(map, {renderOptions:{map: map, panel: 'result', autoViewport: true}});driving.search(startPoint, endPoint);startPoint.enableDragging();//开启起点拖拽功能endPoint.enableDragging();//开启终点拖拽功能$('sider').style.width = '297px';$('myMap').style.width = '700px';
}//张莹
var p1 = new BMap.Point(116.41896,40.010856);
var m1 = new BMap.Marker(p1);
var lab1 = new BMap.Label("张莹",{offset:new BMap.Size(20,-10)});
map.addOverlay(m1);
m1.setLabel(lab1);
var content1 = '<div class="infowin"><p><b>张莹</b></p><p>金泉家园</p><p><a target="_blank" href="http://weibo.com/milkmap">weibo.com/milkmap</a></p></div><div style="float:left;margin:0 0 0 5px;"><img class="myinfopic" src="zhangying.jpg" /></div>';
var infowin1 = new BMap.InfoWindow(content1);
m1.addEventListener("click",function(){this.openInfoWindow(infowin1);
});
//郭汀峰
var p2 = new BMap.Point(116.417806,40.004292);
var m2 = new BMap.Marker(p2);
var lab2 = new BMap.Label("郭汀峰",{offset:new BMap.Size(20,-10)});
map.addOverlay(m2);
m2.setLabel(lab2);
var content2 = '<div class="infowin"><p><b>郭汀峰</b></p><p>雅园</p><p><a target="_blank" href="http://weibo.com/guotingfeng">weibo.com/guotingfeng</a></p></div><div style="float:left;margin:0 0 0 5px;"><img class="myinfopic" src="guotingfeng.jpg" /></div>';
var infowin2 = new BMap.InfoWindow(content2);
m2.addEventListener("click",function(){this.openInfoWindow(infowin2);
});
//王建明
var p3 = new BMap.Point(116.417936,40.00414);
var m3 = new BMap.Marker(p3);
var lab3 = new BMap.Label("王建明",{offset:new BMap.Size(20,-10)});
map.addOverlay(m3);
m3.setLabel(lab3);
var content3 = '<div class="infowin"><p><b>王建明</b></p><p>雅园</p><p><a target="_blank" href="http://weibo.com/u/2269441761">weibo.com/u/2269441761</a></p></div><div style="float:left;margin:0 0 0 5px;"><img class="myinfopic" src="wangjianming.jpg" /></div>';
var infowin3 = new BMap.InfoWindow(content3);
m3.addEventListener("click",function(){this.openInfoWindow(infowin3);
});
//姜华
var p4 = new BMap.Point(116.418327,40.004088);
var m4 = new BMap.Marker(p4);
var lab4 = new BMap.Label("姜华",{offset:new BMap.Size(20,-10)});
map.addOverlay(m4);
m4.setLabel(lab4);
var content4 = '<div class="infowin"><p><b>姜华</b></p><p>雅园</p><p><a target="_blank" href="http://weibo.com/u/2854074294">weibo.com/u/2854074294</a></p></div><div style="float:left;margin:0 0 0 5px;"><img class="myinfopic" src="jianghua.jpg" /></div>';
var infowin4 = new BMap.InfoWindow(content4);
m4.addEventListener("click",function(){this.openInfoWindow(infowin4);
});
//曾耀文
var p5 = new BMap.Point(116.418664,40.004164);
var m5 = new BMap.Marker(p5);
var lab5 = new BMap.Label("曾耀文",{offset:new BMap.Size(20,-10)});
map.addOverlay(m5);
m5.setLabel(lab5);
var content5 = '<div class="infowin"><p><b>曾耀文</b></p><p>雅园</p><p><a target="_blank" href="#">无新浪微博</a></p></div><div style="float:left;margin:0 0 0 5px;"><img class="myinfopic" src="zengyaowen.jpg" /></div>';
var infowin5 = new BMap.InfoWindow(content5);
m5.addEventListener("click",function(){this.openInfoWindow(infowin5);
});
//刘炽珍
var p6 = new BMap.Point(116.363583,40.014685);
var m6 = new BMap.Marker(p6);
var lab6 = new BMap.Label("刘炽珍",{offset:new BMap.Size(20,-10)});
map.addOverlay(m6);
m6.setLabel(lab6);
var content6 = '<div class="infowin"><p><b>刘炽珍</b></p><p>农业大学东校区家属院</p><p><a target="_blank" href="#">无新浪微博</a></p></div><div style="float:left;margin:0 0 0 5px;"><img class="myinfopic" src="liuchizhen.jpg" /></div>';
var infowin6 = new BMap.InfoWindow(content6);
m6.addEventListener("click",function(){this.openInfoWindow(infowin6);
});
//张美玉
var p7 = new BMap.Point(116.384896,40.004339);
var m7 = new BMap.Marker(p7);
var lab7 = new BMap.Label("张美玉",{offset:new BMap.Size(20,-10)});
map.addOverlay(m7);
m7.setLabel(lab7);
var content7 = '<div class="infowin"><p><b>张美玉</b></p><p>南沙滩</p><p><a target="_blank" href="http://weibo.com/u/1940475675">weibo.com/u/1940475675</a></p></div><div style="float:left;margin:0 0 0 5px;"><img class="myinfopic" src="zhangmeiyu.jpg" /></div>';
var infowin7 = new BMap.InfoWindow(content7);
m7.addEventListener("click",function(){this.openInfoWindow(infowin7);
});
//肖国盛
var p8 = new BMap.Point(116.418148,40.004325);
var m8 = new BMap.Marker(p8);
var lab8 = new BMap.Label("肖国盛",{offset:new BMap.Size(20,-10)});
map.addOverlay(m8);
m8.setLabel(lab8);
var content8 = '<div class="infowin"><p><b>肖国盛</b></p><p>雅园</p><p><a target="_blank" href="http://weibo.com/ethanxiao4u">weibo.com/ethanxiao4u</a></p></div><div style="float:left;margin:0 0 0 5px;"><img class="myinfopic" src="xiaoguosheng.jpg" /></div>';
var infowin8 = new BMap.InfoWindow(content8);
m8.addEventListener("click",function(){this.openInfoWindow(infowin8);
});
//许磊
var p9 = new BMap.Point(116.418251,40.00419);
var m9 = new BMap.Marker(p9);
var lab9 = new BMap.Label("许磊",{offset:new BMap.Size(20,-10)});
map.addOverlay(m9);
m9.setLabel(lab9);
var content9 = '<div class="infowin"><p><b>许磊</b></p><p>雅园</p><p><a target="_blank" href="#">无新浪微博</a></p></div><div style="float:left;margin:0 0 0 5px;"><img class="myinfopic" src="xulei.jpg" /></div>';
var infowin9 = new BMap.InfoWindow(content9);
m9.addEventListener("click",function(){this.openInfoWindow(infowin9);
});
//杨红波
var p10 = new BMap.Point(116.418449,40.004297);
var m10 = new BMap.Marker(p10);
var lab10 = new BMap.Label("杨红波",{offset:new BMap.Size(20,-10)});
map.addOverlay(m10);
m10.setLabel(lab10);
var content10 = '<div class="infowin"><p><b>杨红波</b></p><p>雅园</p><p><a target="_blank" href="http://weibo.com/u/1346491567">weibo.com/u/1346491567</a></p></div><div style="float:left;margin:0 0 0 5px;"><img class="myinfopic" src="yanghongbo.jpg" /></div>';
var infowin10 = new BMap.InfoWindow(content10);
m10.addEventListener("click",function(){this.openInfoWindow(infowin10);
});
//彭俊海
var p11 = new BMap.Point(116.304275,39.970501);
var m11 = new BMap.Marker(p11);
var lab11 = new BMap.Label("彭俊海",{offset:new BMap.Size(20,-10)});
map.addOverlay(m11);
m11.setLabel(lab11);
var content11 = '<div class="infowin"><p><b>彭俊海</b></p><p>蜂鸟社区</p><p><a target="_blank" href="http://weibo.com/u/2167619837">weibo.com/u/2167619837</a></p></div><div style="float:left;margin:0 0 0 5px;"><img class="myinfopic" src="pengjunhai.jpg" /></div>';
var infowin11 = new BMap.InfoWindow(content11);
m11.addEventListener("click",function(){this.openInfoWindow(infowin11);
});
//张锦媛
var p12 = new BMap.Point(116.519968,39.936383);
var m12 = new BMap.Marker(p12);
var lab12 = new BMap.Label("张锦媛",{offset:new BMap.Size(20,-10)});
map.addOverlay(m12);
m12.setLabel(lab12);
var content12 = '<div class="infowin"><p><b>张锦媛</b></p><p>华纺易城</p><p><a target="_blank" href="http://weibo.com/u/1869930297">weibo.com/u/1869930297</a></p></div><div style="float:left;margin:0 0 0 5px;"><img class="myinfopic" src="zhangjinyuan.jpg" /></div>';
var infowin12 = new BMap.InfoWindow(content12);
m12.addEventListener("click",function(){this.openInfoWindow(infowin12);
});
//尚宇
var p13 = new BMap.Point(116.34143,39.899505);
var m13 = new BMap.Marker(p13);
var lab13 = new BMap.Label("尚宇",{offset:new BMap.Size(20,-10)});
map.addOverlay(m13);
m13.setLabel(lab13);
var content13 = '<div class="infowin"><p><b>尚宇</b></p><p>荣丰小区</p><p><a target="_blank" href="http://weibo.com/u/2074348632">weibo.com/u/2074348632</a></p></div><div style="float:left;margin:0 0 0 5px;"><img class="myinfopic" src="shangyu.jpg" /></div>';
var infowin13 = new BMap.InfoWindow(content13);
m13.addEventListener("click",function(){this.openInfoWindow(infowin13);
});
//卢德亮
var p14 = new BMap.Point(116.328287,39.993475);
var m14 = new BMap.Marker(p14);
var lab14 = new BMap.Label("卢德亮",{offset:new BMap.Size(20,-10)});
map.addOverlay(m14);
m14.setLabel(lab14);
var content14 = '<div class="infowin"><p><b>卢德亮</b></p><p>科源社区</p><p><a target="_blank" href="http://weibo.com/weibo.com/ludeliang">weibo.com/ludeliang</a></p></div><div style="float:left;margin:0 0 0 5px;"><img class="myinfopic" src="ludeliang.jpg" /></div>';
var infowin14 = new BMap.InfoWindow(content14);
m14.addEventListener("click",function(){this.openInfoWindow(infowin14);
});
//田智之/吴栋霞
var p15 = new BMap.Point(116.409482,40.052386);
var m15 = new BMap.Marker(p15);
var lab15 = new BMap.Label("田智之/吴栋霞",{offset:new BMap.Size(20,-10)});
map.addOverlay(m15);
m15.setLabel(lab15);
var content15 = '<div class="infowin"><p><b>田智之/吴栋霞</b></p><p>佳运园</p><p><a target="_blank" href="#">无新浪微博</a></p></div><div style="float:left;margin:0 0 0 5px;"><img class="myinfopic" src="tzzwdx.jpg" /></div>';
var infowin15 = new BMap.InfoWindow(content15);
m15.addEventListener("click",function(){this.openInfoWindow(infowin15);
});
//马海印
var p16 = new BMap.Point(116.296726,40.03938);
var m16 = new BMap.Marker(p16);
var lab16 = new BMap.Label("马海印",{offset:new BMap.Size(20,-10)});
map.addOverlay(m16);
m16.setLabel(lab16);
var content16 = '<div class="infowin"><p><b>马海印</b></p><p>菊园</p><p><a target="_blank" href="http://weibo.com/u/1831661387">weibo.com/u/1831661387</a></p></div><div style="float:left;margin:0 0 0 5px;"><img class="myinfopic" src="mahaiyin.jpg" /></div>';
var infowin16 = new BMap.InfoWindow(content16);
m16.addEventListener("click",function(){this.openInfoWindow(infowin16);
});
//付强
var p17 = new BMap.Point(116.354628,39.885263);
var m17 = new BMap.Marker(p17);
var lab17 = new BMap.Label("付强",{offset:new BMap.Size(20,-10)});
map.addOverlay(m17);
m17.setLabel(lab17);
var content17 = '<div class="infowin"><p><b>付强</b></p><p>鸭子桥北里14号楼</p><p><a target="_blank" href="#">暂无微博/a></p></div><div style="float:left;margin:0 0 0 5px;"><img class="myinfopic" src="fuqiang.jpg" /></div>';
var infowin17 = new BMap.InfoWindow(content17);
m17.addEventListener("click",function(){this.openInfoWindow(infowin17);
});var ps1 = [p1,p2,p3,p4,p5,p6,p7,p8,p9,p10,p11,p12,p13,p14,p15,p16,p17]; //全部
var ps2 = [p2,p3,p4,p5,p8,p9,p10]; //雅园
var ps3 = [p1,p6,p7,p11,p12,p13,p14,p15,p16,p17]; //其他
setTimeout(function(){map.setViewport(ps1);
}, 1000);

运行示例，请猛击：http://www.ui-love.net/uiweb/cs2004/index.htm

五、说在最后

百度地图API官网：http://developer.baidu.com/map/

你能在上面找到一切微博啊，百度HI群啊，等等的联系方式什么的。

还有百度地图API其他的开发者产品。推荐大家使用一下“云服务”哦~~超级赞！可以上传和搜索开发者自己的数据呢~~~

https://www.dkcj.cn/info/2306.html

Windows Azure Virtual Network (6) 设置Azure Virtual Machine固定公网IP (Virtual IP Address, VIP) (1)...

《Windows Azure Platform 系列文章目录》注意：本文介绍的是Global Azure (http://www.windowsazure.com)，如果你使用的是由世纪互联运维的Azure China，请参考下面的连接。 Azure China (8) 使用Azure PowerShell创建虚拟机，并设…

编程日记2024/02/26 16:30:00

如何正确的学习Blender-入门到精通课程

编程日记2024/02/26 16:00:00

Java学习总结：47(打印流)

打印流打印流包含字节打印流(PrintStream)和字符打印流(PrintWriter)。例：定义打印流工具类 package Project.Study.PrintStream;import java.io.File; import java.io.FileOutputStream; import java.io.OutputStream;class PrintUtil{ …

编程日记2024/02/26 15:30:00

npm err错误

npm ERR!无法安装任何包的解决办法通过config命令： npm config set registry http://registry.cnpmjs.org转载于:https://www.cnblogs.com/owys/p/5058463.html

编程日记2024/02/26 15:00:00

2022-2028年中国高纯锑行业市场全景研究及发展趋势分析报告

【报告类型】产业研究【报告价格】4500起【出版时间】即时更新（交付时间约3个工作日） 【发布机构】智研瞻产业研究院【报告格式】PDF版本报告介绍了中国高纯锑行业市场行业相关概述、中国高纯锑行业市场行业运行环境、分析了中国高纯锑行业市场…

编程日记2024/02/26 14:30:00

super返回不过来

class Fruit { String color "未确定颜色"; //定义一个方法，该方法返回调用该方法的实例 public Fruit getThis() { return this; } public void info() { System.out.println("Fruit方法"); …

编程日记2024/02/26 14:00:00

使用Vuforia Unity构建增强现实应用

编程日记2024/02/26 13:30:00

Java学习总结：48(System类对IO的支持)

System类对IO的支持 System类与IO有关的3个对象常量 No.常量类型描述1public static final PrintStream err常量显示器上错误显示2public static final PrintStream out常量显示器上信息输出3public static final IntputStream in常量键盘数据输入我们最早使用的"Syste…

编程日记2024/02/26 13:00:00

mac 端口转发方案

mac 端口映射好坑 osx10.10mac移除了ipfw改用pfpf以前没用过查文档mac的 pf语法，没有找到。bsd的倒是很全，心喜拿来一试。http://www.openbsd.org/faq/pf/rdr.html 试了bsd的几个example都不行。报语法错误pfctl: Syntax error in config file: pf rul…

编程日记2024/02/26 12:30:00

2022-2028年中国钢轨探伤车行业市场研究及前瞻分析报告

【报告类型】产业研究【报告价格】4500起【出版时间】即时更新（交付时间约3个工作日） 【发布机构】智研瞻产业研究院【报告格式】PDF版本报告介绍了中国钢轨探伤车行业市场行业相关概述、中国钢轨探伤车行业市场行业运行环境、分析了中国钢轨探…

编程日记2024/02/26 12:00:00

Java中的50个关键字

2019独角兽企业重金招聘Python工程师标准>>> Java中的50个关键字关键字也称为保留字，是指java语言中规定了特定含义的标示符。对于保留字，用户只能按照系统规定的方式使用，不能自行定义。Java中有50个常用关键字： 与数…

编程日记2024/02/26 11:30:00

保留字不能被用作变量名或函数名。abstractbooleanbytecharclassconstdebuggerdoubleenumexportextendsfinalfloatgotoimplementsimportintinterfacelongnativepackageprivateprotectedpublicshortstaticsupersynchronizedthrowstransientvolatile注意：如果把关键字…

编程日记2024/02/26 11:00:00

动画产业基础学习教程 Rad How to Class – Animation Industry Fundamentals

如何分类——动画产业基础大小解压后：6.2G 含课程素材 1920X1080 mp4 语言：英语中英文字幕（根据原英文字幕机译更准确） 信息: 绘画技巧、解剖学、角色设计、透视和整体讲故事——这门为期6周的课程旨在聚焦于工作室正在寻找什么…

编程日记2024/02/26 10:30:00

136. 只出现一次的数字(关于异或的使用)

136. 只出现一次的数字给定一个非空整数数组，除了某个元素只出现一次以外，其余每个元素均出现两次。找出那个只出现了一次的元素。说明： 你的算法应该具有线性时间复杂度。你可以不使用额外空间来实现吗？ 示例 1: 输入: [2…

编程日记2024/02/26 10:00:00

C_str的入门级notes

嗯，受人所托，顺便整理的英文渣侵删。 // 注释的部分是解说(废话)和不怎么重(kǎo)要(ch)的错误请指正 #include <stdio.h> #include <string.h> int main() {char str[] "sstr";// "sstr." s, s, t, r, \0// witho…

编程日记2024/02/26 09:30:00

2022-2028年中国钢材市场投资分析及前景预测报告(全卷)

【报告类型】产业研究【报告价格】4500起【出版时间】即时更新（交付时间约3个工作日） 【发布机构】智研瞻产业研究院【报告格式】PDF版本报告介绍了中国钢材行业市场行业相关概述、中国钢材行业市场行业运行环境、分析了中国钢材行业市场行业的…

编程日记2024/02/26 09:00:00

IOS UITableView详解一数据展示页面简单实现

为什么80%的码农都做不了架构师？>>> 一 UITableView简介 UITableView用于表格数据展示，是使用频率最高的控件。UITableView继承自UIScrollView，具有UIScrollView的所有特性。二 UITableView的两种样式 2.1 UITableViewStylePlai…

编程日记2024/02/26 08:30:00

Bulk_Collect_Performance 比较

上一篇讲到了调用集锦，这篇关注一下性能问题吧。 DECLARECURSOR c_tool_listISSELECT descr d1 FROM hardware;l_descr hardware.descr%type; BEGINOPEN c_tool_list;LOOPFETCH c_tool_list INTO l_descr;EXITWHEN c_tool_list%notfound;END LOOP;CLOSE c_tool_list…

编程日记2024/02/26 08:00:00

Unity初学Shadergraph创建着色器学习教程

MP4 |视频:h264，1280720 |音频:AAC，44.1 KHz，2 Ch 语言：英语中英文字幕（根据原英文字幕机译更准确） |时长:51节课(4h 44m) |大小解压后:2.55 GB 使用Unity Shadergraph创建游戏资产指南初学者的Unity Sha…

编程日记2024/02/26 07:30:00

Linux命令学习总结：hexdump

命令简介： hexdump是Linux下的一个二进制文件查看工具，它可以将二进制文件转换为ASCII、八进制、十进制、十六进制格式进行查看。指令所在路径：/usr/bin/hexdump 命令语法： hexdump: [-bcCdovx] [-e fmt] [-f fmt_file] [-n leng…

编程日记2024/02/26 07:00:00

Java学习总结：49(字符缓冲流：BufferedReader)

字符缓冲流：BufferedReader 在开始前先让我们来看一段代码 package Project.Study.IOSystem;import java.io.InputStream;public class Test4 {public static void main(String[]args)throws Exception{InputStream inputStreamSystem.in;StringBuffer bufnew Str…

编程日记2024/02/26 06:30:00

2022-2028年中国干洗行业市场全景调研与投资前景预测报告

【报告类型】产业研究【报告价格】4500起【出版时间】即时更新（交付时间约3个工作日） 【发布机构】智研瞻产业研究院【报告格式】PDF版本报告介绍了中国干洗行业市场行业相关概述、中国干洗行业市场行业运行环境、分析了中国干洗行业市场行业的…

编程日记2024/02/26 06:00:00

成为优秀高级程序员的10个要点(转)

英文原文：10 Steps to become a Senior Software Engineer What 软件工程师的职业生涯要历经以下几个阶段：初级、中级，最后才是高级。这篇文章主要是讲如何通过 10 个步骤助你成为一名高级软件工程师。 Why 得到更多的报酬！因为你…

编程日记2024/02/26 05:30:00

count http://www.cplusplus.com/reference/algorithm/count/

// count algorithm example#include <iostream>#include <algorithm>#include <vector>using namespace std;//count 他查找一个元素出现的次数int main () {int mycount;// counting elements in array: int myints[] {10,20,30,30,20,10,10,20}; // 8…

编程日记2024/02/26 05:00:00

Clip Studio Paint 高级着色学习教程

剪辑工作室颜料着色专业指南！ A Pro’s Guide to Coloring With Clip Studio Paint! MP4 |视频:h264，1280720 |音频:AAC，44.1 KHz 语言：英语中英文字幕（根据原英文字幕机译更准确）|大小解压后:2.78 GB |时…

编程日记2024/02/26 04:30:00

Java学习总结：50(扫描流：Scanner)

扫描流：Scanner Scanner类定义在java.util包中，所以此类是一个工具类，利用它可以方便地实现数据的输入操作。 Scanner实现了Iterator(迭代)接口与Closeable接口。 Scanner类中定义的常用方法如下： No.方法类型描述1public Scann…

编程日记2024/02/26 04:00:00

圣杯和双飞翼布局

//圣杯布局-wrap设置padding/left right加相对定位 <!DOCTYPE html> <html lang"zh-CN"> <html> <meta charset"utf-8"> <meta http-equiv"X-UA-Compatible" content"IEedge,chrome1"/> <title>&…

编程日记2024/02/26 03:30:00

2022-2028年中国干电池制造行业产销需求与投资预测分析报告

【报告类型】产业研究【报告价格】4500起【出版时间】即时更新（交付时间约3个工作日） 【发布机构】智研瞻产业研究院【报告格式】PDF版本报告介绍了中国干电池制造行业市场行业相关概述、中国干电池制造行业市场行业运行环境、分析了中国干电池…

编程日记2024/02/26 03:00:01

JQuery中的事件以及动画

嘿嘿，今天学习了JQuery的事件以及动画，感觉即将学习完JQuery，在回忆起上周学习的JavaScript，感觉好多刚刚学习的知识点都记得模糊啦，这个是很让失望的，这里只说明了一点，课是听过啦&#xff0c…

编程日记2024/02/26 02:30:00

Go 系列教程 —— 20. 并发入门

欢迎来到我们 Golang 系列教程的第 20 篇。 Go 是并发式语言，而不是并行式语言。在讨论 Go 如何处理并发之前，我们必须理解何为并发，以及并发与并行的区别。并发是什么？ 并发是指立即处理多个任务的能力。一个例子就能很好地说明…

编程日记2024/02/26 02:00:00

【百度地图API】如何制作班级地理通讯录？LBS通讯录

相关文章：

Windows Azure Virtual Network (6) 设置Azure Virtual Machine固定公网IP (Virtual IP Address, VIP) (1)...

如何正确的学习Blender-入门到精通课程

Java学习总结：47(打印流)

npm err错误

2022-2028年中国高纯锑行业市场全景研究及发展趋势分析报告

super返回不过来

使用Vuforia Unity构建增强现实应用

Java学习总结：48(System类对IO的支持)

mac 端口转发方案

2022-2028年中国钢轨探伤车行业市场研究及前瞻分析报告

Java中的50个关键字

javascript保留字

动画产业基础学习教程 Rad How to Class – Animation Industry Fundamentals

136. 只出现一次的数字(关于异或的使用)

C_str的入门级notes

2022-2028年中国钢材市场投资分析及前景预测报告(全卷)

IOS UITableView详解一数据展示页面简单实现

Bulk_Collect_Performance 比较

Unity初学Shadergraph创建着色器学习教程

Linux命令学习总结：hexdump

Java学习总结：49(字符缓冲流：BufferedReader)

2022-2028年中国干洗行业市场全景调研与投资前景预测报告

成为优秀高级程序员的10个要点(转)

count http://www.cplusplus.com/reference/algorithm/count/

Clip Studio Paint 高级着色学习教程

Java学习总结：50(扫描流：Scanner)

圣杯和双飞翼布局

2022-2028年中国干电池制造行业产销需求与投资预测分析报告

JQuery中的事件以及动画

Go 系列教程 —— 20. 并发入门