【百度地圖API】如何制作班級地理通訊錄？LBS通訊錄

本文轉載自查看原文 2012-10-24 11:52 12169 地圖API

摘要：班級通訊錄必備的功能，比如人員列表，人員地理位置標注，展示復雜信息窗口，公交和駕車等。一般班級人員都不會超過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其他的開發者產品。推薦大家使用一下“雲服務”哦~~超級贊！可以上傳和搜索開發者自己的數據呢~~~

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 DotNet 調用百度地圖 LBS 服務 API aaronyang的百度地圖API之LBS雲與.NET開發 Javascript API 2.0【把數據存到LBS雲2/2】【百度地圖API】如何利用PhoneGap制作地圖APP 百度地圖API python 調用百度地圖api接口獲取地理詳細信息行政代碼等 JS調用百度地圖API獲取地理位置 HTML5調用百度地圖API進行地理定位實例 android百度地圖——獲取當前地理位置百度地圖API基本使用（三）百度地圖api 常用demo