百度地图——入门教程-阿里云开发者社区

百度地图——入门教程

2023-04-23 196

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 入门教程

一、登录账号以及获取秘钥

获取秘钥

登录百度帐号

提交之后会出现一个新增的AK也就是所谓的秘钥

这时候就可以直接用来调用了

二、引入地图

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

三、创建地图容器

之后创建一个盒子

<div id="container"></div>

四、定义盒子大小

设置盒子大小以及隐藏logo和版权

#container {
            margin: 100px auto;
            width: 500px;
            height: 300px
        }
        /* 百度地图版权 */
        .BMap_cpyCtrl {
            display: none;
        }
        /* 百度地图logo */
        .anchorBL {
            /* display: none; */
        }

五、设置地图详细样式

<script type="text/javascript">
        var map = new BMapGL.Map("container");
        // 允许放大缩小
        map.enableScrollWheelZoom(true);
        // 创建地图实例 
        var point = new BMapGL.Point(121.467406, 31.411477, 20);
        // 创建标记位置
        var marker = new BMapGL.Marker(new BMapGL.Point(121.467406, 31.411477));
        // 默认放大倍数
        map.centerAndZoom(point, 20);
        function addOverlay() {
            map.addOverlay(marker); // 增加点
        }
        addOverlay()
        var opts = {
            width: 200,     // 信息窗口宽度
            height: 100,     // 信息窗口高度
            title: "小朋友专属区", // 信息窗口标题
            message: "这里是公寓"   
        }
        var infoWindow = new BMapGL.InfoWindow("地址：上海市xx区xx路xxxxx", opts);  // 创建信息窗口对象 
        marker.addEventListener("click", function () {
            map.openInfoWindow(infoWindow, point); //开启信息窗口
        });
        // 初始化地图，设置中心点坐标和地图级别 
        var geolocation = new BMapGL.Geolocation();
        var geoc = new BMapGL.Geocoder();
        console.log(geoc);
    </script>