百度map - gaocong－IT工程師數位筆記本

文章出處
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>我愛你</title>
    <script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.2&services=true"></script>
    <style type="text/css">
        .div-relative {
            position: relative;
            color: #000;
            border: 1px solid #000;
            width: 99%;
            height: 800px;
        }
        /* 背景為黃色 */
        .div-a {
            position: absolute;
            left: 80px;
            top: 80px;
            background: #00F;
            width: 300px;
            height: 300px;
        }
        /* DIV背景顏色為藍色*/
    </style>
</head>
<body>
    <div class="div-relative" id="dituContent" >
    </div>
</body>
</html>
<script>

    function initMap() {
        createMap();//創建地圖 
        setMapEvent();//設置地圖事件 
        addMapControl();//向地圖添加控件 
        //addMarker(markerArr); //向地圖中添加marker
        //Load_Point(content);
    }
    //創建地圖函數：
    var local;
    function createMap() {
        var map = new BMap.Map("dituContent", { minZoom: 13, maxZoom: 18 }); //在百度地圖容器中創建一個地圖 
        var point = new BMap.Point(111.292827, 30.697726); //定義一個中心點坐標 
        map.centerAndZoom(point, 13); //設定地圖的中心點和坐標并將地圖顯示在地圖容器中 
        window.map = map; //將map變量存儲在全局 
        local = new BMap.LocalSearch(map, {
            renderOptions: {
                map: map,
                selectFirstResult: false
            }
        });

    }

    //地圖事件設置函數： 
    function setMapEvent() {
        map.enableDragging(); //啟用地圖拖拽事件，默認啟用(可不寫) 
        map.enableScrollWheelZoom(); //啟用地圖滾輪放大縮小 
        map.enableDoubleClickZoom(); //啟用鼠標雙擊放大，默認啟用(可不寫) 
        map.enableKeyboard(); //啟用鍵盤上下左右鍵移動地圖 
    }
    //地圖控件添加函數： 
    function addMapControl() {
        //向地圖中添加縮放控件
        var ctrl_nav = new BMap.NavigationControl({
            anchor: BMAP_ANCHOR_TOP_LEFT,
            type: BMAP_NAVIGATION_CONTROL_LARGE
        });
        map.addControl(ctrl_nav);
        //向地圖中添加縮略圖控件 
        var ctrl_ove = new BMap.OverviewMapControl({
            anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
            isOpen: 1
        }); map.addControl(ctrl_ove); //向地圖中添加比例尺控件 
        var ctrl_sca = new BMap.ScaleControl({
            anchor: BMAP_ANCHOR_BOTTOM_LEFT
        });
        map.addControl(ctrl_sca);
        map.addControl(new BMap.MapTypeControl({ mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP] }));
    }
    //創建marker
    function addMarker(markerArr1) {
        for (var i = 0; i < markerArr1.length; i++) {
            var json = markerArr1[i];
            var p0 = json.monitoring_point_longitude;
            var p1 = json.monitoring_point_latitude;
            var point = new BMap.Point(p0, p1);
            var icon = { h: 60, l: 0, lb: 9, t: 1, w: 60, x: 6 };
            var iconImg = createIcon(icon, 1, markerArr1[i]);
            var marker = new BMap.Marker(point, { icon: iconImg });;

            var iw = createInfoWindow(markerArr1, i);
            var label = new BMap.Label(json.monitoring_point_name, { "offset": new BMap.Size(icon.lb - icon.x + 15, -2) });
            marker.setLabel(label);
            map.addOverlay(marker);
            label.setStyle({ borderColor: "#808080", color: "#333", cursor: "pointer" });
            (function () {
                var index = i;
                var _iw = iw;
                var _marker = marker;
                _marker.addEventListener("click", function () {
                    this.openInfoWindow(_iw);
                });
                _iw.addEventListener("open", function () { _marker.getLabel().hide(); });
                _iw.addEventListener("close", function () { _marker.getLabel().show(); });
                label.addEventListener("click", function () { _marker.openInfoWindow(_iw); });
                if (!!json.isOpen) {
                    label.hide(); _marker.openInfoWindow(_iw);
                }
            })()
        }
    }
    //<option value="0">水文氣象綜合站</option>
    // <option value="1">河道水文站</option>
    // <option value="2">道路水位站</option>
    var mnType = {
        "0": "水文氣象綜合站",
        "1": "河道水文站",
        "2": "道路水位站"
    };
    //創建InfoWindow 
    function createInfoWindow(markerArr1, i) {
        var json = markerArr1[i];
        var data = loademstimedata(json.monitoring_point_mn);
        var tr = "";
        $(data).each(function (index, row) {
            tr += "<tr><td>" + row.factor_name + "</td><td>" + row.datatime + "</td><td>" + row.avgvalue + "</td></tr>";
        });
        var opts = {
            width: 700,     // 信息窗口寬度
            height: 400,     // 信息窗口高度
            title: "", // 信息窗口標題
            enableMessage: true,//設置允許信息窗發送短息
            message: ''
        }
        var detail = "站點名稱：" + json.monitoring_point_name +
             "<br>站點類型：" + mnType[json.monitoring_point_type] +
            "<br/>站點的地址：" + json.monitoring_point_address;
        if (!json.monitoring_point_pic) {
            json.monitoring_point_pic = "../Images/img/none.jpg";
        }
        var imgDom = "<img style='float:left;margin-left: 27px;width:156px;height:165px;' src='" + json.monitoring_point_pic + "' /><div style='float:left;font-size: 17px;margin-left: 20px;width:370px;overflow-x: auto;'>" + detail + "</div>";
        var htmldom = imgDom + "<table class='table'>" +
              "<thead><tr>" +
                      "<th >名稱</th>" +
                      "<th >時間</th>" +
                      "<th >監測值</th>" +
              "<tr/></thead>" +
              "<tbody>" + tr + "</tbody>"
        "</table>";
        var iw = new BMap.InfoWindow(htmldom, opts);
        return iw;
    }
    //創建一個Icon 
    function createIcon(json, t, obj) {
        var icon;
        if (obj.monitoring_point_pic) {
            if (t == 1) {
                icon = new BMap.Icon(obj.monitoring_point_pic, new BMap.Size(json.w, json.h), { imageOffset: new BMap.Size(-json.l, -json.t), infoWindowOffset: new BMap.Size(json.lb + 5, 20), offset: new BMap.Size(json.x, json.h) });
            }
        } else {
            if (t == 1) {
                icon = new BMap.Icon("../Scripts/easyui/themes/ext/arrow_down.png", new BMap.Size(json.w, json.h), { imageOffset: new BMap.Size(-json.l, -json.t), infoWindowOffset: new BMap.Size(json.lb + 5, 20), offset: new BMap.Size(json.x, json.h) });
            }
        }
        return icon;
    }
    var points = null;
    initMap();
</script>
參考 http://developer.baidu.com/map/jsdemo.htm#a1_2
文章列表