Vue project uses Baidu map api

Table of contents

1. Baidu Developer Certification

2. Create an application

3. Reference Baidu map API file

4. Display the map 

---

1. Baidu Developer Certification

Enter the official website of Baidu map open platform  , (authentication requires ID number, face recognition, mobile phone Baidu APP, email address )

After the registration and login are completed, developer authentication can be performed on the console.

2. Create an application

You can create an application in the application management. The application type needs to be browser-side. If the Referer whitelist is only a test version, you can use * first. Only the websites in the whitelist can successfully initiate calls.

 An AK will be generated when the creation is complete.

3. Reference Baidu map API file

There are tutorials in the JavaScript Open Documentation , which can be referenced according to the tutorial.

If we want to use it in vue, we need to put this code segment in the html file.

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

 The ak value inside needs to be modified, which is the ak value generated by the application created above.

4. Display the map 

Showing the map also has a demo for learning. 

If the api is introduced in index.html in vue, it can be used in the project. 

var map = new BMapGL.Map("container");          // 创建地图实例 
var point = new BMapGL.Point(116.404, 39.915);  // 创建点坐标 
map.centerAndZoom(point, 15);                 // 初始化地图，设置中心点坐标和地图级别

This is the use case, there are a few things to pay attention to:

1. Put this code into the Mounted life cycle;
2. To get the instance that displays the map, you can use ref to get it;
3. Set the width and height of the instance displaying the map;
4. The creation point coordinates can be modified.

 

 So far, the simple use of Baidu map API has been completed.