地图总结"/>
百度地图总结
百度地图使用流程
首先注册一下账号和自己的ak
开始使用百度地图api开发
- 第一步：创建HTML 并添加一个容器
<div id="map"></div>
- 第二步：引入百度地图js
<script type="text/javascript" src=".0&&type=webgl&ak=你申请的ak">
</script>
- 使用百度地图api开始写对应的代码
<script>//实例化百度地图const map = new BMapGL.Map('map')//设置一个坐标点const point = new BMapGL.Point(114.611458, 36.660914)//生成百度地图map.centerAndZoom(point, 16)//实现鼠标滚轮缩放map.enableScrollWheelZoom()
</script>
地图设置类型
//设置地图类型 BMAP_EARTH_MAP:卫星图,//BMAP_NORMAL_MAP:普通街道地图// map.setMapType(BMAP_EARTH_MAP)map.setMapType(BMAP_NORMAL_MAP)
地图异步加载
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>html {height: 100%}body {height: 100%;margin: 0px;padding: 0px}#map {width: 900px;height: 450px;border: 1px solid #ccc;margin: 20px auto;}</style></head><body><div id="map"></div>
</body>
<!-- <script type="text/javascript" src=".0&&type=webgl&ak=GARHEjrSEtihCn5PY0TpvMBYdCa02TOq"> -->
<!-- </script> -->
<script>window.onload = loadScriptfunction loadScript() {//创建scriptconst script = document.createElement('script')script.src = '.0&&type=webgl&ak=GARHEjrSEtihCn5PY0TpvMBYdCa02TOq&callback=initmap'document.body.appendChild(script)}//初始化地图函数function initmap() {//实例化百度地图const map = new BMapGL.Map('map')//设置一个坐标点const point = new BMapGL.Point(116.211596, 40.143386)//生成百度地图map.centerAndZoom(point, 18)//实现鼠标滚轮缩放map.enableScrollWheelZoom()//设置地图类型 BMAP_EARTH_MAP:卫星图,BMAP_NORMAL_MAP:普通街道地图// map.setMapType(BMAP_EARTH_MAP)map.setMapType(BMAP_NORMAL_MAP)}
</script></html>
地图旋转与倾斜
//倾斜map.setTilt()//旋转map.setHeading(i)
地图常用控件
更多推荐
百度地图总结
发布评论