三分钟学会调用百度地图API

最新推荐文章于 2024-01-04 20:15:00 发布

原创最新推荐文章于 2024-01-04 20:15:00 发布 · 2.0k 阅读

CC 4.0 BY-SA版权

本文详细介绍如何使用百度地图API创建地图应用。首先，需在百度地图官网注册为开发者并获取AK。接着，在本地编写HTML文件，引入百度地图API，并通过JavaScript实现地图的显示和功能定制，如设置中心点、缩放级别、添加导航控件等。最后，演示了如何在地图上添加多个行政区划和搜索特定地点。

学习调用百度地图API

1.首先你要在百度地图的官网注册成为开发者
并创建自己的应用,获取ak,这里如果在web网页中，我选择用js
在这里插入图片描述

2.然后在本地编写调用的html文件

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <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=3.0&ak=P39PpXRcSvYIugAGG4HKCiB3GVNncaKA"></script> 

    <title>添加多个行政区划</title>
</head>
<body>
    <div id="allmap"></div>
</body>

<script type="text/javascript">
    // 百度地图API功能
    var map = new BMap.Map("allmap");
    map.centerAndZoom(new BMap.Point(114.522081844,38.0489583146), 15);
    // 初始化地图,设置中心点坐标和地图级别，缩放
    map.addControl(new BMap.NavigationControl({type: BMAP_NAVIGATION_CONTROL_SMALL}));
    map.enableScrollWheelZoom();
    madeBoundary();
    

//区域图
    function madeBoundary() {       
    var datas = new Array("新华区-#665599","石家庄市长安区-#1199cc","裕华区-#559955","桥西区-#666ddd");
        var bdary = new BMap.Boundary();
        for(var i=0;i<datas.length;i++){
        getBoundary(datas[i],bdary);    
        } 
        
    } 
//设置区域图

    function getBoundary(data,bdary){    
      data = data.split("-");
        bdary.get(data[0], function(rs){       //获取行政区域    
            var count = rs.boundaries.length; //行政区域的点有多少个

              var pointArray = [];
            for (var i = 0; i < count; i++) {
                var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 2, strokeColor: "#ff0000"
            }
                ); //建立多边形覆盖物      
                map.addOverlay(ply);  //添加覆盖物
                map.setViewport(points);    //调整视野
            }                             
        });     
    }
        var local = new BMap.LocalSearch(map, {
        renderOptions:{map: map}
    });
    local.search("充电桩");

</script>

</html>

3.在浏览器浏览，ok！

在这里插入图片描述