Article directory
1. Introduction to the article
The components of geographic location ( ) in the learning amisframework today are shown in the following figure:LocationPicker
For more information about amisit, you can refer to the blog post: Explanation of Baidu's low-code amis framework
Note in the screenshot that akthe parameters can only amisbe used in the official website example, let's go to the Baidu map open platform to apply for our own ak.
Baidu map open platform official website address: https://lbsyun.baidu.com
Baidu Maps will also open some free ones Apito provide some basic map services.
So click the link, go to the Baidu map open platform, and apply for your own ak.
Speaking of now, AKwhat's the use? AK即access key, which is equivalent to the identity of our Baidu map, will also be tied to the real-name information, and can only be used for normal development (not illegal use).
After we have it AK, we can refer to the development document to call Baidu map, and it can also be used in the Vue-baidu-mapfollowing articles.
2. Apply for AK
- Visit the Baidu map open platform, if you have not logged in, you will see the login, as shown in the figure below:
- After successful login, click the console on the home page, as shown in the following figure:
- Click App Management in the console, find My Apps, and click Create App.
If you do not have real-name authentication, you need to complete real-name authentication before you can create an application, as shown in the following figure:
Because it can only be obtained by creating an application ak.
- Select the type of real-name authentication, because I am an individual, so choose
我是个人爱好者/学生, as shown in the following figure:
- After filling in the personal information according to the steps, the real-name authentication can be completed, and we can create the application, as shown in the following figure:
After filling in the relevant information truthfully, it will generally pass the review.
-
Application name: take a relevant project name
-
Application type: select browser side
-
*White list: just fill in
- After the creation is successful, you can see it in my application
ak, as shown in the figure below:
3. Use AK
Let's open the Baidu map open platform again , click on the development document, and you will see the following development document:
-
Webto develop -
Androidto develop -
iOSto develop -
HarmonyOSto develop -
…
Because I am web development, choose JavaScript API, as shown in the following figure:
Click on the development guide, find the getting started guide, and click Hello Worldto see the example, as shown in the figure below:
Of course, you can click DEMO详情to view the complete version DEMO信息, as shown in the figure below:
Copy the source code in DEMO details, go to our html page, pay attention to this statement in the source code:
<script
type="text/javascript"
src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=您的密钥"></script>
Modify this statement as follows:
<script
type="text/javascript"
src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=您的密钥"></script>
The complete sample code is as follows:
<!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=您的密钥"></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>
4. Solve the error that BMapGL is not defined
If you copy DEMOthe source code directly without modifying the above statement:
<script
type="text/javascript"
src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=您的密钥"></script>
Can report the following error, we just need to add it //apiin front https, that https://api.map.baidu.com/api?type=webgl&v=1.0&ak=您的密钥is.
5. Summary at the end of the paper
After my analysis, I believe you 申请百度地图开发者AK和基本使用have a preliminary understanding.
However, in actual development, the situation encountered may be different.
For example, you may embed Baidu Maps in Androidor iOSof App, then you have to read the relevant documents of Android开发or in the development documentation.iOS开发