百度地图_账号和获取密钥
百度地图提供了一套由JavaScript语言编写的应用程序接口,该套接 口目前最新版本为 JavaScript API GL v1.0 。 使用这些接口我们就可以在页面上构建功能丰富、交互性强的地图应用。
接口使用方法:
1、注册百度账号
2、 申请成为百度开发者
3、 获取服务密钥
4 、使用服务相关功能
百度地图_初始化
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); //开启鼠标滚轮缩放
百度地图_变更地图类型
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)//设置地图类型为地球
百度地图_添加控件
控件是负责与地图交互的UI元素,百度地图API支持比例尺、缩放、定位、城市选择列表、版权 。
1、完成地图初始化
2、添加控件, map.addControl(控件实例)
添加比例尺控件
var scaleCtrl = new BMapGL.ScaleControl(); // 实例化比例尺控件 map.addControl(scaleCtrl);//添加比例尺控件
添加缩放控件
var zoomCtrl = new BMapGL.ZoomControl(); //实例化控件 map.addControl(zoomCtrl);// 添加缩放控件
添加城市列表控件
var cityCtrl = new BMapGL.CityListControl(); //实例化控件 map.addControl(cityCtrl);// 添加城市列表控件
添加定位控件
var locationCtrl=new BMapGL.LocationControl()//实例化控件 map.addControl(locationCtrl)//添加定位控件
HTML新特性【账号和获取密钥、初始化、变更地图类型、添加控件、改变控件位置、添加覆盖物、自定义标注图标、添加文本标注】(四)-全面详解(学习总结---从入门到深化)(下):https://developer.aliyun.com/article/1420272