一、引入
- 首先获取秘钥
1.进入百度地图官网：https://lbsyun.baidu.com/
2.注册百度账号
3.首页 --> 控制台 --> 应用管理 --> 我的应用 --> 创建应用（前端应用类型：选择浏览器端） --> 得到ak
- 引用百度地图API文件:
<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=您的密钥">
二、添加控件
<body>
<div id="container"></div>
</body>
<script>
var map = new BMapGL.Map('container') // 创建地图实例
var point = new BMapGL.Point(113.6648, 34.7835) //咱们东三街位置
// var point = new BMapGL.Point(116.404, 39.915) // 创建点坐标
map.centerAndZoom(point, 15) // 初始化地图，设置中心点坐标和地图级别
map.enableScrollWheelZoom(true) //开启鼠标滚轮缩放
map.setHeading(64.5) //设置地图旋转角度
map.setTilt(73) //设置地图的倾斜角度
// 禁止地图旋转和倾斜可以通过配置项进行设置
var map = new BMapGL.Map('allmap', {
enableRotate: false,
enableTilt: false,
})
map.setMapType(BMAP_EARTH_MAP) // 设置地图类型为地球模式
var scaleCtrl = new BMapGL.ScaleControl() // 添加比例尺控件
map.addControl(scaleCtrl)
var zoomCtrl = new BMapGL.ZoomControl() // 添加缩放控件
map.addControl(zoomCtrl)
var cityCtrl = new BMapGL.CityListControl() // 添加城市列表控件
map.addControl(cityCtrl)
</script>
效果：
三、绘制点线面
<body>
<div id="container" style="width: 800px;height: 600px;"></div>
</body>
<script>
var map = new BMapGL.Map('container') // 创建地图实例
var point = new BMapGL.Point(113.6648, 34.7835) //咱们东三街位置
// var point = new BMapGL.Point(116.404, 39.915) // 创建点坐标
map.centerAndZoom(point, 17) // 初始化地
最低0.47元/天 解锁文章
2518
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
