百度API使用示例

来源：互联网发布：paragon ntfs mac 15 编辑：程序博客网时间：2024/05/20 13:18

这几天正好要使用一个地图接口，然后发现了百度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>