JS - 百度地圖工具類

使用前申請好key就OK啦

<!DOCTYPE>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
        #container {width:800px;height:800px;overflow:hidden;margin:0;padding:0;}
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=key"></script>
    <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
    <!--加载鼠标绘制工具-->
    <script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
    <link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />
    <title>工具控件</title>
    <style>
        #type,#marker,#circle,#result {font-size:25px;}
    </style>
</head>
<body>
<div class="main">
    <table>
        <tr>
            <td>
                <div id="container"></div>
            </td>
            <td>
                <div id="type">類型</div>
                <div id="marker">經緯度</div>
                <div id="circle">半徑</div>
                <div id="result">距離或面積</div>
            </td>
        </tr>
    </table>
</div>
<script>
var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(118.101766, 36.835935), 15);
var myDrawingManagerObject = new BMapLib.DrawingManager(map,
    {
        //是否开启绘制模式
        isOpen: true,
        drawingType: BMAP_DRAWING_MARKER,
        //是否添加绘制工具栏控件
        enableDrawingTool: true,
        enableCalculate: true,
        drawingToolOptions: {
            //停靠位置、默认左上角
            anchor: BMAP_ANCHOR_TOP_LEFT,
            //偏移值
            offset: new BMap.Size(10, 10),
            drawingTypes : [
                BMAP_DRAWING_MARKER,
                BMAP_DRAWING_CIRCLE,
                BMAP_DRAWING_POLYLINE,
                BMAP_DRAWING_POLYGON,
                BMAP_DRAWING_RECTANGLE
            ]
        },
    polylineOptions: {
        strokeColor: "#000"
        }
    });
    myDrawingManagerObject.addEventListener("markercomplete", function(e, overlay) {
        console.log(overlay.point);
        document.getElementById('marker').innerHTML = '纬度: '
            + overlay.point.lng
            + ' | 经度:'
            + overlay.point.lat;
    });
    myDrawingManagerObject.addEventListener("circlecomplete", function(e, overlay) {
        console.log(overlay.xa);
        document.getElementById('circle').innerHTML = '半徑: ' + overlay.xa;
    });
    myDrawingManagerObject.addEventListener("polylinecomplete", function(e, overlay) {
        console.log(overlay);
    });
    myDrawingManagerObject.addEventListener("polygoncomplete", function(e, overlay) {
        console.log(overlay);
    });
    myDrawingManagerObject.addEventListener("rectanglecomplete", function(e, overlay) {
        console.log(overlay);
    });
    myDrawingManagerObject.addEventListener("overlaycomplete", function(e) {
        //alert(e.drawingMode);
        //alert(e.overlay);
        //alert(e.calculate);
        var result = e.calculate;
        document.getElementById('result').innerHTML = '距離或面積: ' + result;
        var type = myDrawingManagerObject.getDrawingMode();
        document.getElementById('type').innerHTML = '類型: ' + type;
    });
</script>
</body>
</html>
返回文章列表 文章二维码 打赏
本页链接的二维码
打赏二维码
期待你的评论

7 条评论
  1. 上海seo 青铜   上海seo  

    不错哦,可以收藏了。。@(哈哈)

    1. 小尾巴 王者   小尾巴   博主
      @ 上海seo

      ๑乛◡乛๑

  2. Bary 白银   Bary  

    请问你那个“页面加载[0.0001 s]”是怎么优化出来的...... @(不高兴)

    1. 镜花水月 白银   镜花水月  
      @ Bary

      @(呵呵) 这个有插件的吧

    2. 小尾巴 王者   小尾巴   博主
      @ Bary

      在頁面頂部和尾部用microtime()函數獲取2次時間戳,然後計算得出的時間差就是這個啦

      1. Bary 白银   Bary  
        @ 小尾巴

        我是问为什么那么快啊,每次都是 0.0001 我很嫉妒啊。 @(不高兴)

        1. 小尾巴 王者   小尾巴   博主
          @ Bary

          你當阿里云ECS跟你鬧着玩的啊 ╮(╯▽╰)╭