百度地图api_ 字节宝

百度地图api

api地址

http://lbsyun.baidu.com/

注册账号

查看api

要先进行注册账号和申请密钥（ak）才可使用该服务，接口无使用次数限制，请放心使用

创建应用

申请账号为开发账号

申请密钥

创建应用

hello word开发

复制api提供的html脚本到工程中

输入密钥

访问页面测试

常见api测试

模板

代码语言：javascript复制

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Hello, World</title>
    <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>
</head>

<body>
<div id="container"></div>
<script type="text/javascript">
    var map = new BMapGL.Map("container");
    // 创建地图实例
    var point = new BMapGL.Point(116.404, 39.915);
    // 创建点坐标
    map.centerAndZoom(point, 15);
    // 初始化地图，设置中心点坐标和地图级别
</script>
</body>
</html>

页面展示效果

开启鼠标滚轮缩放

代码语言：javascript复制

map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放

设置地图的旋转角度和倾斜角度

代码语言：javascript复制

map.setHeading(64.5);   //设置地图旋转角度
map.setTilt(73);       //设置地图的倾斜角度

变更地图类型为地球

代码语言：javascript复制

 map.setMapType(BMAP_EARTH_MAP);      // 设置地图类型为地球模式

添加控件

添加缩放控件

代码语言：javascript复制

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

设置标注

代码语言：javascript复制

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

给当前标记添加点击事件

代码语言：javascript复制

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

示例Demo

总结

注册开发账号
申请ak
示例demo
学会看api

map 百度地图api 测试地图开发

0 人点赞