百度地图入门API使用(一)

本文章叫你如何简单的使用百度提供的地图api

首先需要注册一个百度地图的账号详情 请 点击百度开放平台

我们跳过此步

做一个自己的地图dome

百度地图入门API使用(一)_第1张图片

查看开发文档我们可以看到 首先需要使用百度提供的script

然后我们需要在页面给 api一个容器

直接上代码 引入百度script文件

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

在页面创建一个容器

<style>
        html,
        body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }
        
        #map {
            width: 50%;
            height: 50%;
            margin: auto;
        }
    style>
    <div id="map">div>

我们给个div 给它当容器

1.接下来 需要使用这个容器 new BMapGL.Map()
//使用容器
var _Map = new BMapGL.Map('map')
2.创建地图实例 new BMapGL.Point(经度,纬度)
//中心点的经度 纬度
// 创建地图实例 
var point = new BMapGL.Point(114.17, 30.36)
3.地图初始化 设置地图级别 map.centerAndZoom(地图实例,地图级别)
// 传入实例 1 - 18 由远到近显示 初始化
 _Map.centerAndZoom(point, 18)

做完这一步 你就可以得到一个以你填的经纬度为中心的地图了

百度地图入门API使用(一)_第2张图片

接下来的是一点辅助功能

4.是否允许滚轮缩放
//是否允许滚轮缩放
 _Map.enableScrollWheelZoom(true);
5.改变模式
//改变模式开启地球模式
 _Map.setMapType(BMAP_EARTH_MAP);

百度地图入门API使用(一)_第3张图片

你可能感兴趣的:(小白,html5,javascript)