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

现在的位置: 首页 > 综合 > 正文

RSS

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

2012年02月07日 ⁄ 综合 ⁄ 共 11376字 ⁄ 字号小中大 ⁄ 评论关闭

摘要：班级通讯录必备的功能，比如人员列表，人员地理位置标注，展示复杂信息窗口，公交和驾车等。一般班级人员都不会超过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<

【上篇】web.config中sessionState节点的配置方案
【下篇】[资料]数据库服务器规划之IO子系统

作者: gump

该日志由 gump 于12年前发表在综合分类下，最后更新于 2012年02月07日.
转载请注明: 【百度地图API】如何制作班级地理通讯录？LBS通讯录 | 学步园 +复制链接

抱歉!评论已关闭.

返回首页

（其他合作也可洽谈）

必威体育

必威电竞

学步园