This article is from chaoCode. Please send a personal message and link to the author and the original address at the beginning of the article.

Violators, the author reserves the right to pursue.

preface

Due to the need of the recent project, I have recently started to study the use of Baidu Map API. A brief introduction to the use of Baidu Map JavaScript API is expected to be helpful to my friends, and I will have the opportunity to do further research in the future.

Interested partners can find baidu map API by themselves

Baidu Map open platform development documents in the JavaScript API

The preparatory work

Before using Baidu Maps, we need to have a Baidu account and register as a Baidu developer. Then we need to create a browser-side application to obtain a unique service key (AK).

Apply to the secret key

Request key (AK)

1. First let’s go to My App and click Create App

2. When creating the application, we need to pay attention to the type of application we need. Since mine is a Web project, I choose the browser side for this application type, and there are other application types. In addition, the Referer whitelist is set according to your own needs and according to the following tips. Here, I do not restrict any domain name for convenience, but use *

3. After submitting, we will see the secret key (AK) we need in my application.

  • At this point our preparation work has been completed, at this time we have their own exclusive access to a secret key (AK), so we can use our Baidu API through a simple HTML, to take a look at some of the use of Baidu Map API, no more nonsense, we begin.

Baidu map implementation

1. First we create a hello.html file

2. Refer to Baidu API in HTML (please fill in your own secret key (AK))

< script type = "text/javascript" SRC = "https://api.map.baidu.com/api?v=3.0&ak= your key" > < / script >Copy the code

3. Create a map container element

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

4. Set some page and container styles

<style type="text/css"> html{height:100%} body{height:100%; margin:0px; padding:0px} #container{height:100%} </style>Copy the code

5. Create a map instance

<script type="text/javascript"> var map = new map.map ("container"); Var point = new bmap.point (116.404, 39.915); // Initialize the map and set the center point coordinates and map level map.centerandZoom (point, 15); </script>Copy the code

The final HTML looks like this:

<! <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Hello, World</title> <style type="text/css"> html{height:100%} body{height:100%; margin:0px; padding:0px} #container{height:100%} </style> <script type="text/javascript" SRC = "https://api.map.baidu.com/api?v=3.0&ak= your key" > < / script > < / head > < body > < div id = "container" > < / div > < script Var map = new map.map ("container"); Var point = new bmap.point (116.404, 39.915); // Initialize the map and set the center point coordinates and map level map.centerandZoom (point, 15); </script> </body> </html>Copy the code

6. Simple implementation of Baidu Map

The effect is as follows: you can move and zoom in

Baidu map API detailed explanation

1. Create a container

In fact, when creating the container, there is also a coordsType attribute to control the coordinate type. However, if we do not configure this attribute, the default value is 5, which is the bd0ll coordinate type. If you’re interested, you can go and see what are the types of coordinates? Join us in the comments section

var map = new BMap.Map('container'); // coordsType specifies the coordinate type of the input and output. 3 is the gCJ02 coordinate and 5 is the BD0ll coordinate. The default is 5. Var map = new map.map ("container", {coordsType: 5});Copy the code

2. Set the center point

There are two ways to set the center point. One is to set the coordinates of the center point according to the longitude and latitude as shown above, and the other is to set the center point according to the city name

Ps: Map is our container don’t forget

Var point = new bmap.point (116.404, 39.915); map.centerAndZoom(point, 15); CenterAndZoom (' Beijing ', 12);Copy the code

3. Set Zoom

Var map = new bmap.map ("mapContent",{minZoom:4,maxZoom:8}); Map. CenterAndZoom (' Beijing ', 15);Copy the code

4. Zoom the mouse wheel

/ / the default map is only can drag the mouse, the mouse wheel will not modify the map Zoom value. EnableScrollWheelZoom (true);Copy the code

5.JSAPI commercial authorization pendant is enabled by default. If it is disabled, you need to modify the code that calls JSAPI. There are two ways

1. Disable the configuration when initializing the map

var map = new BMap.Map('container', {
    enableBizAuthLogo: false
});
Copy the code

2. Configure the configuration using a map

var map = new BMap.Map('container'); map.disableBizAuthLogo(); / / off the map. EnableBizAuthLogo (); / / openCopy the code

6. Add a map widget

1. Map initialization

Before adding controls, the map needs to be initialized. For example, to add a standard map control to a map, add the following to your code:

var map = new BMap.Map("container"); Map. CenterAndZoom (new BMap. Point (116.404, 39.915), 11); map.addControl(new BMap.NavigationControl());Copy the code

2. Add multiple controls

In this example, we add a pan and zoom control, a scale control, and a thumbnail control to the map. When you add controls to the map, they take effect immediately.

map.addControl(new BMap.NavigationControl()); map.addControl(new BMap.ScaleControl()); map.addControl(new BMap.OverviewMapControl()); map.addControl(new BMap.MapTypeControl()); Map. SetCurrentCity (" Beijing "); // The MapTypeControl switchover function is available only when the city information is setCopy the code

When you initialize the controller, you provide an optional parameter where the Anchor and offset properties together control the position of the control on the map. Anchor indicates where the control is docked, that is, in which corner of the map the control is docked. When the map size changes, the control adjusts its position based on where it is docked.

var opts = {offset: new BMap.Size(150, 5)}
map.addControl(new BMap.ScaleControl(opts));
Copy the code

7. Personalized maps

Personalized map style editor

Call personalized map style by style ID (recommended)

1. Create personalized map styles

Go to the Maps Open Platform console page, in my Maps, and create a map style:

2. Edit styles

Click on the created map style, enter the Style editor, and freely edit the map style according to your needs:3. Publish the style and get the style ID

After editing, publish the map style in my map or editor and get the resulting style ID:4. Apply the map style to the JavaScript API

Take the style ID obtained in step 3 as an argument to the setMapStyleV2 method.

The relevant code is as follows:

map.setMapStyleV2({     
  styleId: '3d71dc5a4ce6222d3396801dee06622d'
});
Copy the code

Note: 1. Before using the personalized map, please refer to Hello World to build the basic map; 2. The setMapStyleV2 method should be executed after map initialization (centerAndZoom) is complete. 3. Style updates do not change the style ID. So if there is a need to update the style, re-editing the release can do the update. No need to modify the JavaScript API call code; 4. If the style ID is removed from the console, but the JavaScript API continues to be called. The default map will be rendered;

Call the personalized map style through the style JSON

1. Get the style JSON

Enter my map, create a map style, enter the editor, and get the JSON code directly through the “download JSON” function in the editor:

2. Apply the map style to the JavaScript API

Take the style JSON obtained in the previous step as a parameter to the setMapStyleV2 method.

The relevant code is as follows:


var styleJson = [];

map.setMapStyleV2({styleJson:styleJson});

Copy the code

The map looks like this:

Above these are simple to use, the subsequent I met some problems in the process of using and solving process, the use of the new API will continue to update to share, baidu map API to development of documents is very comprehensive, but he is now provided are some online development, for some network company is not too friendly, So I need to do some research on offline development in the following part, and I will share it with you after I finish offline map development.

Thank you for watching, and feel free to let us know in the comments section if you have any mistakes. If this post helped you, feel free to like 👍 and follow.