百度API使用示例

最新推荐文章于 2024-02-21 18:31:08 发布

原创最新推荐文章于 2024-02-21 18:31:08 发布 · 1.2w 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#百度API

应用接口专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何使用百度API，特别是地图接口的功能。通过一个实际示例，演示了如何在代码中集成百度API，强调了需要替换ak参数为个人申请的秘钥以确保功能正常运行。

这几天正好要使用一个地图接口，然后发现了百度API，还不错，蛮好用的，稍微研究了下，贴出来与大家分享下。

请注意，在使用下面示例时，需要将 script.src = "http://api.map.baidu.com/api?v=1.5&ak=你申请的秘钥&callback=initialize"; 中“你申请的秘钥”替换成你在百度申请的秘钥

<!DOCTYPE HMTL>
<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gbk">
    <title>百度API开发实例</title>
<script type="text/javascript">
    function initialize() {
        var mp = new BMap.Map('map', { mapType: BMAP_HYBRID_MAP }); //创建地图实例  {mapType: BMAP_HYBRID_MAP}为设置默认的为卫星地图
        mp.centerAndZoom(new BMap.Point(121.427, 31.131), 20); //后面的20为设置默认地图缩放比例
       
        //控制控件的位置,anchor:表示停靠在地图的哪个脚，offset指定偏移量，离地图边界相隔多少像素
        //BMAP_ANCHOR_TOP_LEFT详见百度API说明
        var opts = { anchor: BMAP_ANCHOR_TOP_LEFT, offset: new BMap.Size(10, 10) };
        mp.addControl(new BMap.NavigationControl(opts));  //缩放控件
        mp.addControl(new BMap.ScaleControl());   //比例尺控件
        mp.addControl(new BMap.OverviewMapControl());  //小地图
        mp.addControl(new BMap.MapTypeControl()); //地图类型（地图、卫星、三维）

        mp.enableScrollWheelZoom(); //启用滚轮进行缩放

        var marker = new BMap.Marker( new BMap.Point(121.427, 31.131)); //创建标注
        mp.addOverlay(marker); //将标注添加到地图中
        marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
        marker.enableDragging();  //标注可拖拽，默认不可

        //监听标注拖拽位置事件
        marker.addEventListener("dragend", function (e) {
            alert("当前位置:" + e.point.lng + "," + e.point.lat); //表示经纬度
        });

        //移除标注
        marker.addEventListener("click", function () {
            alert("ajax与数据库连接操作");
            mp.removeOverlay(marker);
        });

        //设置带文字标签
        var label = new BMap.Label("请点击我", { offset: new BMap.Size(20, -10) });
        marker.setLabel(label);

        //信息窗口
        var opts = { width: 50, height: 10, title: "hello" }; //信息窗口
        var infoWindow = new BMap.InfoWindow("world", opts); //创建信息窗口对象
        marker.openInfoWindow(infoWindow);  //自动打开信息窗口
        //marker.addEventListener("mouseover", function () { this.openInfoWindow(infoWindow); });  //当鼠标移到标注时，打开信箱窗口口

        // 随机向地图添加10个标注
        var bounds = mp.getBounds();
        var sw = bounds.getSouthWest(); 
        var ne = bounds.getNorthEast();
        var lngSpan = Math.abs(sw.lng - ne.lng);
        var latSpan = Math.abs(ne.lat - sw.lat);
        for (var i = 0; i < 10; i++) {
            var point = new BMap.Point(sw.lng + lngSpan * (Math.random() * 0.7), ne.lat - latSpan * (Math.random() * 0.7));
            addMarker("mark_"+i,point);
        }
        // 编写自定义函数,创建标注
        function addMarker(markName,point) {
            var markName = new BMap.Marker(point);
            mp.addOverlay(markName);
            markName.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
            //信息窗口
            var label = new BMap.Label("警告:有人入侵!", { offset: new BMap.Size(20, -10) });
            markName.setLabel(label);
            //移除标注
            markName.addEventListener("click", function () {
                mp.removeOverlay(markName);
            });
        }
    }

    //下面是对地图的一些操作，等待两秒钟后，它会移动到新的中心点
    // window.setTimeout(function(){
    //map.panTo(new BMap.Point(116.409,39.918));
    // },2000);

    function loadScript() {
        var script = document.createElement("script");
        script.src = "http://api.map.baidu.com/api?v=1.5&ak=你申请的秘钥&callback=initialize"; 
        document.body.appendChild(script);
    }

    window.onload = loadScript;
</script>  
</head>

<body>
<div id="map" style="width:920px;height:520px"></div>  
</body>
</html>