百度地图api的基本使用

百度地图坐标拾取系统链接：

http://api.map.baidu.com/lbsapi/getpoint/index.html

最近业务需求，需要在网页上地图。关于地图的使用，主流的就是高德地图，百度地图。经比较以后，发现两种地图的使用的方式几乎一模一样。

于是，我使用了百度地图。

1、注册百度账号，在http://lbsyun.baidu.com/apiconsole/key?application=key 页面申请密钥(AK)

2、页面引入

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的密钥"></script>

3、地图需要一个HTML元素作为容器，这样才能展现到页面上。这里我们创建了一个div元素。

<body>
<div id = "allmap"></div>
</body>

4、实例化地图

<script type="text/javascript">

    //百度地图API功能
    var map = new BMap.Map("allmap");
    map.centerAndZoom(new BMap.Point(120.378386,30.309756),15);//根据坐标初始化地图
     map.enableScrollWheelZoom(true);
    map.addControl(new BMap.NavigationControl());   //平移缩放控件
    map.addControl(new BMap.ScaleControl());        //比例尺
    map.addControl(new BMap.OverviewMapControl());  //缩略地图
    map.addControl(new BMap.MapTypeControl());      //地图类型
    map.setCurrentCity("杭州"); // 仅当设置城市信息时，MapTypeControl的切换功能才能可用

    //添加标注
    var marker = new BMap.Marker(new BMap.Point(120.378386,30.309756));        // 创建标注
    map.addOverlay(marker);                     // 将标注添加到地图中
</script>

至此，地图已经可以显示了。

完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- baidu map -->
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的密钥"></script>
</head>
<body>
<div id = "allmap"></div>
</body>
</html>
<script type="text/javascript">

    //百度地图API功能
    var map = new BMap.Map("allmap");
    map.centerAndZoom(new BMap.Point(120.378386,30.309756),15);//根据坐标初始化地图
     map.enableScrollWheelZoom(true);
    map.addControl(new BMap.NavigationControl());   //平移缩放控件
    map.addControl(new BMap.ScaleControl());        //比例尺
    map.addControl(new BMap.OverviewMapControl());  //缩略地图
    map.addControl(new BMap.MapTypeControl());      //地图类型
    map.setCurrentCity("杭州"); // 仅当设置城市信息时，MapTypeControl的切换功能才能可用

    //添加标注
    var marker = new BMap.Marker(new BMap.Point(120.378386,30.309756));        // 创建标注
    map.addOverlay(marker);                     // 将标注添加到地图中
</script>

关于百度地图API的其他使用，其官方文档说的非常详细和清楚。

链接如下：http://lbsyun.baidu.com/index.php?title=jspopular3.0

百度地图api的基本使用

猜你喜欢