经调查，Google不提供地图api的免费服务，目前百度对个人认证的开发者提供每日 5000 次的静态图免费配额，
做测试足够用了。
（参考文档：https://lbs.baidu.com/solutions/privilege）

使用方法如下：
(参考文档：https://lbs.baidu.com/index.php?title=jspopularGL)

  1. 注册百度账号
  2. 在百度地图开放平台 https://lbs.baidu.com，选择上面目录上的 控制台，注册成为开发者，选择成为个人开发者
    注册过程需要填写注册目的和认证个人信息，如实回答就好，没有人工审核，正常情况可以直接通过。
  3. 创建应用，根据需要选择应用类型
  4. 应用创建完成即可得到访问应用的AK，即api请求中需要用到的密钥

Demo

  • index.html

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <!DOCTYPE html>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
    <style type="text/css">  
        html{height:100%}    
        body{height:100%;margin:0px;padding:0px}    
        #container{height:100%}    
    </style> 
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=您的密钥">
    </script>
    <body>
        <div id="container"></div> 
        <script src="main.js"></script>
    </body>

  • main.js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    var map = new BMapGL.Map("container");

    var scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件
    map.addControl(scaleCtrl);
    var zoomCtrl = new BMapGL.ZoomControl();  // 添加缩放控件
    map.addControl(zoomCtrl);
    var cityCtrl = new BMapGL.CityListControl();  // 添加城市列表控件
    map.addControl(cityCtrl);

    var point = new BMapGL.Point(114.4351, 38.0713);
    var marker = new BMapGL.Marker(point);        // 创建标注   
    map.addOverlay(marker);                     // 将标注添加到地图中
    map.centerAndZoom(point, 15);

    var content = "这里是视频拍摄的位置"
    var label = new BMapGL.Label(content, {       // 创建文本标注
        position: point,                          // 设置标注的地理位置
        offset: new BMapGL.Size(2, 2)           // 设置标注的偏移量
    });
    map.addOverlay(label);

    label.setStyle({                              // 设置label的样式
        color: '#000',
        fontSize: '30px',
        border: '2px solid #1E90FF'
    });

    label.addEventListener("click", function () {
        alert("您点击了标注");
    });

效果图：