baidu_map_demo.html

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>百度地图应用示例</title>
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
</head>
<body>
    <form method="post" id="form1">
        <div id="allmap" style="width:800px; height:600px; border:solid 1px gray; margin:0 auto;">
        </div>
    </form>
    
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=s1eeiQEfDF0WZfdfvLgHbG2Ru49UNCrn"></script>
    <script type="text/javascript"> 
     
    // 百度地图 API 功能对象
    var map = null;
    if (BMap) {
        map = new BMap.Map("allmap");  // id=allmap 的容器内显示
        map.enableScrollWheelZoom();
    }

    /**
    * 指定经纬度，图标，标注文本
    * 在地图上添加标注
    * longitude 经度
    * latitude  纬度
    * icon      图标
    * text      标注文本
    **/
    function addMarker(longitude, latitude, icon, text) {
        if (!map) return;

        var point = new BMap.Point(longitude, latitude); 
        var myIcon = new BMap.Icon(icon + ".png", new BMap.Size(32, 32));
        // 指定位置及标注的图标
        var marker = new BMap.Marker(point, { icon: myIcon });  // 创建标注
        if(text){
            var label = new BMap.Label(text, { offset: new BMap.Size(32, -16) });
            marker.setLabel(label);
        }
        // 添加到地图上
        map.addOverlay(marker);          
    }

    /**
    * 指定起止经纬度，绘制连接线
    * 
    * longitudeFrom 经度
    * latitudeFrom  纬度
    * longitudeTo   经度
    * latitudeTo    纬度
    **/
    function addLine(longitudeFrom, latitudeFrom, longitudeTo, latitudeTo) {
        if (!map) return;

        var pointFrom = new BMap.Point(longitudeFrom, latitudeFrom); 
        var pointTo = new BMap.Point(longitudeTo, latitudeTo); 
        // 可以指定多点连接，此处只考虑两点
        var line = new BMap.Polyline([pointFrom, pointTo], { strokeWeight:1, strokeOpacity:0.5, strokeColor:"red" });
        // 添加到地图上
        map.addOverlay(line);     
    }

    /**
    * 添加图例
    * 实质就是在地图上添加自己的页面元素 
    *
    * html 网页元素
    **/
    function addLegend(html){
        var LegendControl = function () {
            this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;
            this.defaultOffset = new BMap.Size(10, 10);
        }

        LegendControl.prototype = new BMap.Control();
        LegendControl.prototype.initialize = function (map) {
            var le = $(html)[0];
            map.getContainer().appendChild(le);
            return le;
        };

        var legendCtrl = new LegendControl();
        map.addControl(legendCtrl);
    } 

    </script> 

    <script type="text/javascript"> 
    // 机器类：经度，纬度，名称
    function Machine(longitude, latitude, name){
        this.longitude = longitude;
        this.latitude = latitude;
        this.name = name;
    } 
    
    // 确定地图的中心位置与缩放级别
    var center = new BMap.Point(110.423997,31.40979);             
    map.centerAndZoom(center, 6);  // 级别 6，跨省视图
    
    // 添加图例，自由写 html
    addLegend("<div style='font-size:12px; color:gray; width:140px; padding:5px; background:white; text-align:center; border:solid 1px gray;'>总部：<img src='head.png' style='width:16px; vertical-align:middle;' />&nbsp;&nbsp;设备：<img src='machine.png'  style='width:16px; vertical-align:middle;' /></div>");
    
    // 总部位置
    var head = { longitude : 112.918702343957, latitude : 28.30070516 };
    addMarker(head.longitude, head.latitude, 'head', '总部');
    
    // 所有机器位置
    var machineList = [
        new Machine(114.876143,38.113315,'石家庄'),
        new Machine(112.521289,37.822014,'太原'),
        new Machine(108.989008,34.328175,'西安'),
        new Machine(117.230997,31.881961,'合肥'),
        new Machine(103.984944,30.553819,'成都'),
        new Machine(108.400295,22.862517,'南宁'),
        new Machine(113.257181,23.169067,'广州'),
        new Machine(120.174565,30.298715,'杭州'),
        new Machine(102.881106,24.959705,'昆明')
    ];
    
    // 添加所有机器并连线
    for(var i=0; i<machineList.length; i++){
        addMarker(machineList[i].longitude, machineList[i].latitude, 'machine', machineList[i].name);
        addLine(head.longitude, head.latitude, machineList[i].longitude, machineList[i].latitude);
    } 
      
    </script>
        
</body>
</html>