百度API的初步了解

最新推荐文章于 2024-02-22 14:09:28 发布

weixin_45847162

最新推荐文章于 2024-02-22 14:09:28 发布

阅读量344

点赞数

本文链接：https://blog.csdn.net/weixin_45847162/article/details/105472176

版权

1.百度地图JavaScript API支持HTTP和HTTPS，免费对外开放，可直接使用。
2.接口使用无次数限制。
3.在使用前，您需先申请密钥（ak）才可使用。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <title>Document</title>
    <style type="text/css">
        html {
            height: 100%
        }

        body {
            height: 100%;
            margin: 0px;
            padding: 0px
        }

        #container {
            height: 100%
        }
    </style>
    //必须调用百度API
    //<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=Wn2PA6duu8QBCYKkylAMqZmVq3HxmE7X"></script>
</head>

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

    <script>
    	//1.API使用BMap作为命名空间，所有类均在该命名空间之下。比如：BMap.Map、BMap.Control、BMap.Overlay。
    	//2.在调用此构造函数时，应确保容器元素已经添加到地图上
        var map = new BMap.Map("container",{minZoom:2,maxZoom:15,enableMapClick:false}); // 创建Map实例
		//enableMapClick:false 构造地图时，关闭地图可点功能
		//minZoom:4,maxZoom:8 设置地图允许的最小/大级别
		map.setMaxZoom(15); map.setMinZoom(2);//也可以动态设置级别：
		
		
		var  example=new  BMap.Marker(new BMap.Point(116.404, 39.915));
		map.addOverlay(example);//向地图添加标注
		map.removeOverlay(example);//移除指定的标注
		clearOverlays();//清楚地图所有的标注
        
        //添加信息框
		var infowindow=new BMap.InfoWindow("world",{width:100,height:100,title:"beijing"});
		map.openInfoWindow(infowindow,map.getCenter());


        //Point类描述了一个地理坐标点，其中116.404表示经度，39.915表示纬度。（为天安门坐标）
        //15表示打开地图的初始比例大小，数字越小就表示地图初始比例越大
        map.centerAndZoom(new BMap.Point(116.404, 39.915), 15);// 初始化地图,设置中心点坐标和地图级别
        
        //添加控件  可以添加多个
        map.addControl(new BMap.MapTypeControl({//添加地图类型  是由 2D 卫星  三维 三种类型组成 
		mapTypes:[
            BMAP_NORMAL_MAP,//2D图
            BMAP_HYBRID_MAP //混合图
        ]}));

		map.enableScrollWheelZoom(true);//开启鼠标滚轮缩放
		map.disableDragging();     //禁止拖拽
		map.setCurrentCity("北京"); // 设置地图显示的城市 此项是必须设置的
    </script>
</body>
</html>

地图控件：

   map2.addControl(new  BMap.NavigationControl());//添加平移缩放控件  一般在左上角

   map2.addControl(new  BMap.ScaleControl());//添加比例尺  一般在左下角

   map2.addControl(new  BMap.OverviewControl());//添加小地图  一般在右下角

   map2.addControl(new BMap.MapTypeControl({isOpen:true}));//添加地图类型  一般是在右上角 isOpen:true开启  不加上这个的话 是无法显示的

地图控件的属性：

共有的：
	anchor（控件位置）： 
		BMAP_ANCHOR_TOP_LEFT //表示控件定位于地图的左上角。

		BMAP_ANCHOR_TOP_RIGHT //表示控件定位于地图的右上角。

		BMAP_ANCHOR_BOTTOM_LEFT //表示控件定位于地图的左下角。

		BMAP_ANCHOR_BOTTOM_RIGHT //表示控件定位于地图的右下角。
		
navagationControl 独有的：
	type (类型) :
		MAP_NAVIGATION_CONTROL_LARGE //表示显示完整的平移缩放控件。

		BMAP_NAVIGATION_CONTROL_SMALL //表示显示小型的平移缩放控件。

		BMAP_NAVIGATION_CONTROL_PAN //表示只显示控件的平移部分功能。

		BMAP_NAVIGATION_CONTROL_ZOOM //表示只显示控件的缩放部分功能