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

原文:【百度地图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其他的开发者产品。推荐大家使用一下“云服务”哦~~超级赞!可以上传和搜索开发者自己的数据呢~~~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/460586.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

开发板——在X210开发板上进行裸机开发的流程

流程总结 本文以“LED流水灯”为例&#xff0c;说明在X210开发板上进行裸机开发的流程。 步骤一&#xff1a;搭建嵌入式Linux开发环境 在虚拟机中安装与配置Linux系统&#xff0c;并安装交叉编译工具链&#xff1b; 在win主机上安装dnw软件、九鼎烧写SD卡软件等内容。 步骤二&a…

zmail邮件系统安装手册 V2.0版本

2019独角兽企业重金招聘Python工程师标准>>> Tmail邮件系统安装手册 V2.0版本 1、系统环境 centos6.0以上&#xff0c;最小化安装(64位系统) 2、部署 1、删除自带的postfix、mysql、httpd # rpm -qa|grep postfix|xargs rpm -e --nodeps # rpm -qa|grep mysql|xargs…

Cassandra1.2文档学习(5)—— Snitch

参考资料&#xff1a;http://www.datastax.com/documentation/cassandra/1.2/webhelp/index.html#cassandra/architecture/architectureSnitchesAbout_c.html#concept_ds_c34_fqf_fk 一个snitch&#xff08;告密者&#xff09;决定应当从哪个数据数据中心和机架写入和读取数据。…

Entity Framework在WCF中序列化的问题(转)

问题描述 如果你在WCF中用Entity Framework来获取数据并返回实体对象&#xff0c;那么对下面的错误一定不陌生。 接收对 http://localhost:5115/ReService.svc 的 HTTP 响应时发生错误。这可能是由于服务终结点绑定未使用 HTTP 协议造成的。 这还可能是由于服务器中止了 HTTP …

【iHMI43 4.3寸液晶模块】demo例程(版本1.03)发布

技术论坛&#xff1a;http://www.eeschool.org 博客地址&#xff1a;http://xiaomagee.cnblogs.com 官方网店&#xff1a;http://i-board.taobao.com 银杏科技 GINGKO TECH. 保留权利&#xff0c;转载请注明出处 一、简介&#xff1a; 1、iHMI43 演示程序(版本号&#xff1a;1…

SDRAM——X210的SDRAM的初始化

以下内容源于朱友鹏嵌入式课程的学习与整理&#xff0c;如有侵权请告知删除。 参考博客&#xff1a;s5pv210——初始化SDRAM - biaohc - 博客园 这里说的SDRAM&#xff0c;简单点理解就是内存。 一、SDRAM的简介 1、SDRAM的含义 SDRAM是Syncronized Dynamic Ramdam Access Me…

安卓开发.四大组件.activity.1

安卓开发.四大组件.activity.1 转载于:https://www.cnblogs.com/motadou/p/3534056.html

单独一台机器测试Open×××加密隧道的问题和解决

其实这篇文章和Open的关系倒不是很大&#xff0c;只是通过Open测试时暴露出的问题。这篇文章里面倒是包含了很多IP路由以及conntrack的细节内容。 有时候&#xff0c;为了节省机器&#xff0c;我希望在一台设备上模拟多个设备&#xff0c;当然&#xff0c;使用网络命名空…

SCRT中只换行不回车的问题(阶梯)

转载源&#xff1a;SecureCRT中只换行不回车的问题 - 知乎 在SecureCRT中有时会遇到由于Windows的换行和Unix的换行控制字符不同的问题&#xff08;\r\n-\n&#xff09;&#xff0c;导致显示如下图所示的“阶梯”&#xff0c;又不想到源码中一个个改控制字符&#xff0c;此时可…

Android Training精要(六)如何防止Bitmap对象出现OOM

1.使用AsyncTask異步加載bitmap圖片避免OOM: class BitmapWorkerTask extends AsyncTask<Integer, Void, Bitmap> { private final WeakReference<ImageView> imageViewReference; private int data 0; public BitmapWorkerTask(ImageView imageView) { // Use a …

iOS会议和组织

全世界有许多iOS会议和组织&#xff0c;如果你没有机会去参加&#xff0c;知道他们的存在和向他们学习对你也是有益的。事实上&#xff0c;他们中有些提供免费的幻灯片、视频&#xff0c;有用资料等&#xff0c;所以你不能够忽视他们。 有一些会议的主题并不仅仅关于iOS的&…

开发板——X210开发板的软开关(供电置锁)

以下内容源于朱有鹏嵌入式课程的学习与整理&#xff0c;如有侵权请告知删除。 一、前言 本章节在裸机课程的SD卡启动部分。 本文讲述如何设置开发板&#xff0c;使得一按下电源键程序运行后即可松手不会断电&#xff0c;即供电置锁。 二、软开关的简介 电路设计一般使用拨码开…

国产Linux软件

为什么80%的码农都做不了架构师&#xff1f;>>> 本页面收集支持deepin/Linux的国产软件&#xff0c;对于每款软件以“日出东方-发行时间较短&#xff1b;正当壮年-时间较长且稳定&#xff1b;每况愈下-你们懂的”评价 软件版本时间评价有道词典 Linux版1.02015-03…

QGLViewer 编译安装步骤

由于工作学习的需要&#xff0c;要用opengl绘制显示些模型动画&#xff0c;原来用的是Qt做UI&#xff0c;直接调用的是QGLWidget类&#xff0c;但这个只是提供了基本的框架&#xff0c;很多交互操作还需添加代码完成&#xff0c;自己偷懒也觉得繁琐&#xff0c;就借用了开源的工…

触摸屏——S5PV210的触摸屏的理论与操作

以下内容源于朱有鹏嵌入式课程的学习与整理&#xff0c;如有其侵权请告知删除。 一、输入类设备简介 1、input/output 输入输出&#xff0c;是计算机系统中的一个概念。计算机可以看作数据处理器。计算机的主要功能就是从外部获取数据&#xff0c;然后进行计算加工得到输出数据…

搭建nginx流媒体服务器(支持HLS)

环境搭建 &#xff08;一&#xff09;下载源代码 nginx&#xff0c;地址&#xff1a;http://nginx.org/可以选择需要的版本下载 nginx_mod_h264_streaming-2.2.7.tar.gz &#xff0c;支持MP4流&#xff0c;具体的说明在下面的这个网页 http://h264.code-shop.com/trac/wiki/Mod…

Spring中的动态代理

动态代理&#xff1a;指的就是通过一个代理对象来创建需要的业务对象&#xff0c;然后在这个代理对象中统一进行各种需求的处理。 学习完Spring后会发现&#xff0c;Spring中的AOP&#xff08;面向方面编程&#xff1a;Aspect Oriented Programming&#xff09;是个很重要的知识…

LED——S5PV210的LED的理论与操作

以下内容源于朱有鹏嵌入式课程的学习与整理&#xff0c;如有侵权请告知删除。 一、LED物理特性介绍 LED本身有2个接线点&#xff0c;一个是LED的正极&#xff0c;一个是LED的负极。 LED的功能就是亮或者不亮&#xff0c;只需要给LED的正极加电压即可点亮LED&#xff0c;去掉电压…

“.公司”域名注册总量TOP15:新网问鼎 万网居亚

IDC评述网&#xff08;idcps.com&#xff09;01月16日报道&#xff1a;根据ntldstats.com发布的最新数据显示&#xff0c;截止至01月15日17:00&#xff0c;在“.公司”域名注册总量大战中&#xff0c;新网打败众多国内外域名服务商&#xff0c;成为新晋霸主&#xff0c;其“.公…

Prepare for Mac App Store Submission--为提交到Mac 应用商店做准备

返回 Mac App Store Prepare for Mac App Store Submission 提交到Mac 应用商店之前的准备 Most of your time is spent on coding tasks, but to develop for the Mac App Store, you need to perform a number of administrative tasks, using Xcode and other tools. You’l…