Apply for Baidu map developer AK and basic use

foreword

Where there is demand, there will be a market, and Baidu Maps will also open up some free APIs. to provide some basic map services.
Today we are going to explain the process of applying for an AK from Baidu Maps, and the basic use after the application is completed, so that you can browse it if you need it in the future.

AK-Application

1. First of all, the most direct way for us to learn a technology is to read the official documents. You can search the Baidu map open platform or enter it through the link below

official website

2. Enter the official website

3. Click on the console, if you are not logged in, you will jump to the login page and use Baidu to scan to log in directly

4. After entering, page application management - my application - create application

5. Application name: Take a relevant project name type, select the browser-side white list and fill in *

Note: The first time you apply for Ak, it will ask you to complete the relevant information description (used to describe what AK is used for). The truthful description will generally pass the review

6. After successful creation

summary:

But when we see this page, it means that our AK application is successful, and what is the use of AK. AK is equivalent to the identity of our Baidu map, and it will also be tied to the real name information, which can only be used for normal development (not illegal use). But after we have AK, we can refer to the development document to call Baidu map. It can also be used for Vue-baidu-map, which will be discussed later in the article

official document

Don't talk nonsense and go directly to the code

Note: Generally, when you copy it, it will report an error, what is not defined, and if you observe carefully, you will find that it is because you did not add https: resulting in no access, so this is the error report, just add this (be careful not to forget the latter :)

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      body,
      html,
      #allmap {
        width: 100%;
        height: 100%;
        overflow: hidden;
        margin: 0;
        font-family: '微软雅黑';
      }
    </style>
    <script
      type="text/javascript"
      src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=你申请的AK"
    ></script>
    <title>地图展示</title>
  </head>
  <body>
    <div id="allmap"></div>
  </body>
</html>
<script type="text/javascript">
  // GL版命名空间为BMapGL
  // 按住鼠标右键，修改倾斜角和角度
  var map = new BMapGL.Map('allmap') // 创建Map实例
  map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11) // 初始化地图,设置中心点坐标和地图级别
  map.enableScrollWheelZoom(true) //开启鼠标滚轮缩放
</script>

Remove the Baidu icon in the lower right corner

// 去除百度地图的图标 根据实际情况看是否要加样式穿透(::v-deep)
    ::v-deep .anchorBL {
      display: none !important;
    }

Summarize:

After this process, I believe that you have also had a preliminary deep impression on the application for Baidu map developer AK and the basic use, but the situation we encountered in the actual development must be different, so we need to understand its principle, Everything remains the same. Come on, hit the workers!

Please point out any deficiencies, thank you -- Fengguowuhen