百度地图_账号和获取密钥
百度地图提供了一套由JavaScript语言编写的应用程序接口,该套接 口目前最新版本为 JavaScript API GL v1.0 。
使用这些接口我们就可以在页面上构建功能丰富、交互性强的地图应用。
接口使用方法:
1 注册百度账号 https://lbsyun.baidu.com/
2 申请成为百度开发者
3、获取服务密钥
4、使用服务相关功能
1.下列描述错误的是: 使用百度地图的接口不需要密钥
百度地图_初始化
1、引用百度地图API文件
<script src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=你的密钥"></script>
2、创建地图容器元素
<div id="container"></div>
3、创建地图实例,其参数可以是元素id也可以是元素对象
var map = new BMapGL.Map("container");
4、设置中心点坐标
var point = new BMapGL.Point(116.404,39.915); //第一个参数为经度,第二个参数为纬度
5、地图初始化,同时设置地图展示级别,地图展示级别范围(1- 21)
map.centerAndZoom(point, 15); //第一个参数为中心点坐标,第二个参数为地图级别
6、开启鼠标滚轮缩放
map.enableScrollWheelZoom(true); //开启鼠标 滚轮缩放
1.使用哪个方法生成百度地图实例: new BMapGL.Map()
百度地图_变更地图类型
var map = new BMapGL.Map('container')//生成地图实例 var centerPoint=new BMapGL.Point(116.404, 39.915)//设置地图的中心点 map.centerAndZoom(centerPoint,1)//初始化地图 map.enableScrollWheelZoom(true)//开启鼠标滚轮缩放 map.setMapType(BMAP_EARTH_MAP)//设置地图类型为地球
1.使用哪个方法变更地图类型:map.setMapType
百度地图_添加控件
控件是负责与地图交互的UI元素,百度地图API支持 比例尺、缩放、定位、城市选择列表、版权 。
1、完成地图初始化
2、添加控件, map.addControl(控件实例)
2.1、添加比例尺控件
var scaleCtrl = new BMapGL.ScaleControl(); // 实例化比例尺控件 map.addControl(scaleCtrl);//添加比例尺控件
2.2、添加缩放控件
var zoomCtrl = new BMapGL.ZoomControl(); //实例化控件 map.addControl(zoomCtrl);// 添加缩放控件
2.3、添加城市列表控件
var cityCtrl = new BMapGL.CityListControl(); //实例化控件 map.addControl(cityCtrl);// 添加城市列表控件
2.4、添加定位控件
var locationCtrl=new BMapGL.LocationControl()//实例化控件 map.addControl(locationCtrl)//添加定位控件
1.使用哪个方法可以添加缩放控件:map.addControl(new BMapGL.ZoomControl())
百度地图_改变控件位置
1、控制控件位置
初始化控件时,可提供一个可选参数,是一个json对象,里面有 个属性 anchor 表示控件的停靠位置,即控件停靠在地图的哪个 角。当地图尺寸发生变化时,控件会根据停靠位置的不同来调整 自己的位置。
var scaleCtrl= new BMapGL.ScaleControl({anchor:BMAP_ANCHOR_TOP_LEFT}) //实例化控件的时候可以传递一个可选参数,为一个 json map.addControl(scaleCtrl)
2、控件位置偏移
除了指定停靠位置外,还可以通过偏移量来指示控件距离地图边界有多少像素。
通过 offset 设置。
var scaleCtrl= new BMapGL.ScaleControl({ anchor:BMAP_ANCHOR_TOP_RIGHT, //offset为一个Size的实例,接受的俩个参数分别代表水平方向距离跟垂直方向距离 offset:new BMapGL.Size(10,10) }) map.addControl(scaleCtrl)//添加比例尺控件
1.用哪个属性设置控件跟地图边界的偏移量:offset
百度地图_添加覆盖物
所有叠加或覆盖到地图的内容,我们统称为地图覆盖物。
1、添加覆盖物: map.addOverlay(覆盖物实例)
1.1、添加点(标注点)使用的类: Marker
var point = new BMapGL.Point(116.404,39.915); var marker = new BMapGL.Marker(point); // 创建标注点 map.addOverlay(marker);// 将标注添加到地图中
1.2、添加多边形
使用的类: Polygon
var polygon = new BMapGL.Polygon([ new BMapGL.Point(116.387112,39.920977), new BMapGL.Point(116.385243,39.913063), new BMapGL.Point(116.394226,39.917988), new BMapGL.Point(116.401772,39.921364), new BMapGL.Point(116.41248,39.927893) ], {strokeColor:"blue",strokeWeight:2, strokeOpacity:0.5}); map.addOverlay(polygon);
2、删除覆盖物: map.removeOverlay(具体覆盖物实例) 或者 map.clearOverlays()
var overlays = map.getOverlays()//获取地图的所有覆盖物 map.removeOverlay(overlays[0])//删除对应的覆盖物 //map.clearOverlays()//删除地图上所有的覆盖物
3、监听覆盖物事件
overlay.addEventListener('事件名称',callback)
marker.addEventListener("click", function(e){ console.log(e) });
1.使用哪个类创建标注点:Marker
百度地图_自定义标注图标
1、百度地图_自定义标注图标
Icon(url: String, size: Size , opts: IconOptions)
var myIcon = new BMapGL.Icon("markers.png",new BMapGL.Size(50, 50), //指定放置图标区域的大小 { //指定地理点跟图标左上角的相对偏移量 anchor: new BMapGL.Size(10, 25), });
2、使用自定义的标注图标创建标注点
// 创建标注对象并添加到地图 var marker = new BMapGL.Marker(point, { icon: myIcon }); map.addOverlay(marker);
1.下列说法错误的是:自定义图标之后,地图上标注点就会直接显示自定义的图标