百度地图快速上手

最新推荐文章于 2023-11-16 10:40:41 发布

可达鸭miss

最新推荐文章于 2023-11-16 10:40:41 发布

阅读量523

点赞数

文章标签：前端 javascript html 百度

本文链接：https://blog.csdn.net/weixin_57110180/article/details/123908354

版权

百度地图官网：百度地图开放平台 | 百度地图API SDK | 地图开发

第一步拿到密钥：

若想要使用百度地图，必须要官网的认证，申请密钥

申请完成后在主页导航中>>控制台>>应用管理>>我的应用>>创建自己的应用；根据提示完成即可，秘钥就会生成；

第二步阅读开发API：

可以选择api文档就行查阅使用方法，也可以根据开发工具中示例中心 更直观的选择想要的功能。

第三步根据文档完成HellWord：

1.在html中script引入地图：

<script type="text/javascript"
        src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=你的秘钥"></script>

2.设置显示地图的容器：

<style type="text/css">
        body,
        html,
        #allmap {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
            font-family: "微软雅黑";
        }
    </style>
<body>
 <div id="allmap"></div>
</body>

注意的是：地图容器与echarts图表容器，都应设置一个大小；

3.创建地图：

  <script type="text/javascript">
        // GL版命名空间为BMapGL
        // 按住鼠标右键，修改倾斜角和角度
        var map = new BMapGL.Map("allmap");    // 创建Map实例
        var point = new BMapGL.Point(113.6648, 34.7835)  //创建的坐标
        map.centerAndZoom(point, 17);  // 初始化地图,设置中心点坐标和地图级别，级别值越大地图显示范围越小
</script>

更多api方法功能：

map.enableScrollWheelZoom(true); 滚轮缩放开启
var scaleCtrl = new BMapGL.ScaleControl(); map.addControl(scaleCtrl); // 添加比例尺控件
var zoomCtrl = new BMapGL.ZoomControl(); map.addControl(zoomCtrl); // 添加缩放控件
var navi3DCtrl = new BMapGL.NavigationControl3D();map.addControl(navi3DCtrl);// 添加3D控件
map.setDisplayOptions({skyColors: ['rgba(186, 0, 255, 0)', 'rgba(186, 0, 255, 0.2)'] })设置天空颜色
var marker = new BMapGL.Marker(new BMapGL.Point(113.6648, 34.7835))；map.addOverlay(marker) 添加标记点

...等等；

地图实例对象亦可添加监听事件，进行更好的操作地图；

例如：添加点击事件，动态添加标记点

  map.addEventListener('click', e => {
            console.log(e);           
            // 创建坐标
            var p = new BMapGL.Point(e.latlng.lng, e.latlng.lat)
            // 创建标记点
            var m = new BMapGL.Marker(p);
            // 在地图添加点
            map.addOverlay(m)
        });

可达鸭miss

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
百度地图快速上手

百度地图官网：百度地图开放平台 | 百度地图API SDK | 地图开发第一步拿到密钥：若想要使用百度地图，必须要官网的认证，申请密钥申请完成后在主页导航中>>控制台>>应用管理>>我的应用>>创建自己的应用；根据提示完成即可，秘钥就会生成；第二步阅读开发API：可以选择api文档就行查阅使用方法，也可以根据开发工具中示例中心更直观的选择想要的功能。第三步根据文档完成HellWord：1.在html中script引入地图：
复制链接

扫一扫