This is the 27th day of my participation in the August Genwen Challenge.More challenges in August

preface

Baidu Map JavaScript API is a set of application programming interface written by JavaScript language, which can help you build a rich and interactive map application in the website. It supports PC and mobile browser based map application development, and supports HTML5 features of map development.

The document address

Baidu map JavaScript SDK:lbsyun.baidu.com/index.php?t…

Method of use

To apply for the key

Baidu map application management platform: lbsyun.baidu.com/apiconsole/…

Create an

Click Create App to create an app for your project. Used to use baidu map API.

The application of information

Set the name of your app, and the type of app (browser).

Once created, we can get the AK, which we’ll introduce later to use.

The introduction of the API

Method one:

In the project’s index.html, add the following code to introduce the Baidu Map API.

<! -- Introduce baidu Map API -->
<script type="text/javascript" src="Https://api.map.baidu.com/api?v=2.0&ak= your key"></script>
<script>
  window.BMap = BMap
</script>
Copy the code

Method 2 :(if you are building a react project using vite, use the following methods to introduce BMap)

In the project’s index.html, add the following code to introduce the Baidu Map API.

<! -- Introduce baidu Map API -->
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=XIYLPKQE2G1jXeKXlplm0kH0x3hqPYpO"></script>
Copy the code

Install yarn add rollup-plugin-external-globals -d and add the following code to the viet.config. js configuration file to expose the BMap globally.

build:{
    rollupOptions: {external: ['BMap'].plugins: [
            externalGlobals({
                BMap: 'BMap',}),],}},Copy the code

Method 3 :(if you are building a react project using webpack, use the following method to introduce BMap)

<! -- Introduce baidu Map API -->
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=XIYLPKQE2G1jXeKXlplm0kH0x3hqPYpO"></script>
Copy the code

Expose BMap globally by adding the following code to the WebPack configuration file.

externals: {
    "BMap": "BMap"
},
Copy the code

The following can be used directly in the project!

Apply colours to a drawing map

Create a container container for rendering the map.

<div className="Map">
    <div id="container">
    </div>
</div>
Copy the code

Style the container so that the map container occupies the entire page.

.Map{
  height: 100%;
  width: 100%;
  #container{
    height: 100%; }}Copy the code

Through BMap. Map incoming to render container, through the navigator. Geolocation. GetCurrentPosition the callback function gets the current position, through BMap. The set Point center coordinates can be.

// Get geolocation information
navigator.geolocation.getCurrentPosition((position= > {
    const map = new BMap.Map("container");
    const latitude=position.coords.latitude
    const longitude=position.coords.longitude
    map.centerAndZoom((new BMap.Point(longitude,latitude)), 15);
}))
Copy the code

More about baidu map API usage, please refer to: lbsyun.baidu.com/index.php?t…