Deploy Baidu map God level tutorial

1. You need to register an account on Baidu development platform

web Service API | Baidu map API SDK

2. Enter the console - Application Management - my application, create an application and get an access ak (secret key)

3 enter the development document - Development Guide - hello world deploy a Baidu map

<!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: "Microsoft YaHei";}
    </style>
<script type= "text/javascript" src= "//api.map.baidu.com/api? Type=webgl&v=1.0&ak= (change to your own secret key)" > </script>
<title> map display </title>
</head>
<body>
    <div id="allmap"></div>
</body>
</html>

 

1 apply for baidu account and ak
2 preparation page
According to the HTML standard, each HTML document should declare the correct document type. We recommend that you use the latest HTML5 compliant document declaration: 
<span style="color:#333333"><span style="background-color:#ffffff"><span style="color:#666666"><span style="background-color:#f7f7f7"><span style="color:#e29629"><span style="color:#394a64"><!DOCTYPE html></span></span></span></span></span></span>

You can also select other types of document declarations as required, so that the browser will render the page in a standard way to ensure the maximum compatibility of the page. We do not recommend that you use the quirks pattern for development.

3 adapt to mobile terminal page display
Let's add a meta tag to make your page better displayed on the mobile platform. 
<span style="color:#333333"><span style="background-color:#ffffff"><span style="color:#666666"><span style="background-color:#f7f7f7"><span style="color:#e29629"><span style="color:#4c4e6a"><meta</span> <span style="color:#3b5bb5">name</span><span style="color:#000000">=</span><span style="color:#3f9b1d">"viewport"</span> <span style="color:#3b5bb5">content</span><span style="color:#000000">=</span><span style="color:#3f9b1d">"initial-scale=1.0, user-scalable=no"</span> <span style="color:#4c4e6a">/></span>  </span></span></span></span></span>
4 set container style
Set the container style size so that the map fills the entire browser window: 
<span style="color:#333333"><span style="background-color:#ffffff"><span style="color:#666666"><span style="background-color:#f7f7f7"><span style="color:#e29629"><span style="color:#4c4e6a"><style</span> <span style="color:#3b5bb5">type</span><span style="color:#000000">=</span><span style="color:#3f9b1d">"text/css"</span><span style="color:#4c4e6a">></span><span style="color:#000000">  
    html</span><span style="color:#000000">{</span><span style="color:#000000">height</span><span style="color:#000000">:</span><span style="color:#3b5bb5">100</span><span style="color:#000000">%}</span><span style="color:#000000">    
    body</span><span style="color:#000000">{</span><span style="color:#000000">height</span><span style="color:#000000">:</span><span style="color:#3b5bb5">100</span><span style="color:#000000">%;</span><span style="color:#000000">margin</span><span style="color:#000000">:</span><span style="color:#3b5bb5">0px</span><span style="color:#000000">;</span><span style="color:#000000">padding</span><span style="color:#000000">:</span><span style="color:#3b5bb5">0px</span><span style="color:#000000">}</span>    
    <span style="color:#9e868f">#container{height:100%}    </span>
<span style="color:#4c4e6a"></style></span> </span></span></span></span></span>
5 reference Baidu map API file 
<span style="color:#333333"><span style="background-color:#ffffff"><span style="color:#666666"><span style="background-color:#f7f7f7"><span style="color:#e29629"><span style="color:#4c4e6a"><script</span> <span style="color:#3b5bb5">type</span><span style="color:#000000">=</span><span style="color:#3f9b1d">"text/javascript"</span> <span style="color:#3b5bb5">src</span><span style="color:#000000">=</span><span style="color:#3f9b1d">"https://api. map. baidu. com/api? V=1.0&&type=webgl&ak= your key "</span><span style=" color:\4c4e6a "> ></span></span></span></span></span></span>
6 create map container elements
The map needs an HTML element as a container to be displayed on the page. Here we create a div element. 
<span style="color:#333333"><span style="background-color:#ffffff"><span style="color:#666666"><span style="background-color:#f7f7f7"><span style="color:#e29629"><span style="color:#4c4e6a"><div</span> <span style="color:#3b5bb5">id</span><span style="color:#000000">=</span><span style="color:#3f9b1d">"container"</span><span style="color:#4c4e6a">></div></span> </span></span></span></span></span>
7 create a map instance
The Map class under the BMapGL namespace represents a Map. You can create a Map instance through the new operator. The parameter can be either an element id or an element object. 
<span style="color:#333333"><span style="background-color:#ffffff"><span style="color:#666666"><span style="background-color:#f7f7f7"><span style="color:#e29629"><span style="color:#fb0e0e">var</span><span style="color:#000000"> map </span><span style="color:#000000">=</span> <span style="color:#fb0e0e">new</span> <span style="color:#3b5bb5">BMapGL</span><span style="color:#000000">.</span><span style="color:#3b5bb5">Map</span><span style="color:#000000">(</span><span style="color:#3f9b1d">"container"</span><span style="color:#000000">);</span></span></span></span></span></span>

be careful:

1. When calling this constructor, ensure that the container element has been added to the map;

2. The namespace API GL version uses bmapgl as the namespace, and all classes are under this namespace, such as bmapgl Map,BMapGL.Control,BMapGL.Overlay；

8 set the coordinates of the center point
Here we use the Point class under the BMapGL namespace to create a coordinate Point. The Point class describes a geographic coordinate Point, where 116.404 represents longitude and 39.915 represents latitude. (Tiananmen Square coordinate) 
<span style="color:#333333"><span style="background-color:#ffffff"><span style="color:#666666"><span style="background-color:#f7f7f7"><span style="color:#e29629"><span style="color:#fb0e0e">var</span><span style="color:#000000"> point </span><span style="color:#000000">=</span> <span style="color:#fb0e0e">new</span> <span style="color:#3b5bb5">BMapGL</span><span style="color:#000000">.</span><span style="color:#3b5bb5">Point</span><span style="color:#000000">(</span><span style="color:#3b5bb5">116.404</span><span style="color:#000000">,</span> <span style="color:#3b5bb5">39.915</span><span style="color:#000000">);</span></span></span></span></span></span>

be careful:

When using the baidu map JavaScript API service, you need to use Baidu BD09 coordinates. If you use other coordinates (WGS84, GCJ02) for display, you need to convert other coordinates to BD09 first. For details, please refer to the coordinate conversion instructions. Do not use unofficial conversion methods.

9 map initialization and map display level setting
After creating the map instance, we need to initialize it. Bmapgl Map. The centerandzoom() method requires that the center point coordinates and the map level be set. The map must be initialized to perform other operations 
<span style="color:#333333"><span style="background-color:#ffffff"><span style="color:#666666"><span style="background-color:#f7f7f7"><span style="color:#e29629"><span style="color:#000000">map</span><span style="color:#000000">.</span><span style="color:#000000">centerAndZoom</span><span style="color:#000000">(</span><span style="color:#000000">point</span><span style="color:#000000">,</span> <span style="color:#3b5bb5">15</span><span style="color:#000000">);</span> </span></span></span></span></span>
So far, we have quickly created a map centered on Tiananmen Square.

add controls

Updated on: December 21, 2020

brief introduction

Control is a UI element responsible for interacting with maps. Baidu map API supports scale, zoom, positioning, city selection list, copyright, and custom controls.

DEMO details

See details Class reference.

controlClass namebrief introduction
Abstract base classControlAll controls inherit the methods and properties of this class. This class allows you to implement custom controls
scaleScaleControlIt is located at the bottom left of the map by default and displays the scale relationship of the map
zoomZoomControlIt is located at the bottom right of the map by default and controls the zoom at the map level
locationLocationControlIt is located at the bottom left of the map by default to obtain positioning
City selection listCityListControlBy default, it is located at the top left of the map for city selection and positioning
copyrightCopyrightControlBy default, it is located at the bottom left of the map to display copyright information
 

Add control to map

Use map The addcontrol () method adds a control to the map.

1. Refer to the display map tutorial to complete map initialization

<!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: "Microsoft YaHei";}
    </style>
    <script type= "text/javascript" src= "//api.map.baidu.com/api? Type=webgl&v=1.0&ak= your key" > </script>
    <title> map display </title>
</head>
<body></body>
</html>
<script type="text/javascript">
    //The GL version namespace is BMapGL
    //Press and hold the right mouse button to modify the inclination and angle
    var map = new BMapGL.Map("allmap");    //  Create map instance
    map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11);  //  Initialize the map, set the center point coordinates and map level
    map.enableScrollWheelZoom(true);     // Turn on mouse wheel zoom
</script>

2 declare the control and add it to the map

var scaleCtrl = new BMapGL.ScaleControl();  //  Add scale bar control
map.addControl(scaleCtrl);
var zoomCtrl = new BMapGL.ZoomControl();  //  Add zoom control
map.addControl(zoomCtrl);
var cityCtrl = new BMapGL.CityListControl();  //  Add city list control
map.addControl(cityCtrl);

Control control position

When initializing the control, you can provide an optional parameter, in which the anchor and offset properties jointly control the position of the control on the map. Anchor indicates the docking position of the control, that is, the corner of the map where the control is docked. When the map size changes, the control will adjust its position according to the different docking positions.

anchor valueLocation description
BMAP_ANCHOR_TOP_LEFTIndicates that the control is positioned in the upper left corner of the map
BMAP_ANCHOR_TOP_RIGHTIndicates that the control is located in the upper right corner of the map
BMAP_ANCHOR_BOTTOM_LEFTIndicates that the control is located in the lower left corner of the map
BMAP_ANCHOR_BOTTOM_RIGHTIndicates that the control is located in the lower right corner of the map

Control position offset

In addition to specifying the docking position, you can also indicate how many pixels the control is from the map boundary by offset. If the docking positions of two controls are the same, the controls may overlap. At this time, you can separate them by offset value.

The following example is: place the scale bar in the lower left corner of the map. Since the API has copyright information by default, you need to add some offset values to prevent control overlap.

var opts = {
    offset: new BMapGL.Size(150, 5)
}
//Add control
map.addControl(new BMapGL.ScaleControl(opts));
//Remove control
map.removeControl(new BMapGL.ScaleControl(opts));

Add dimension points

Marker is a class that adds a point marker to a traffic map. Use it to mark any points of interest you want users to see on the map.

The API provides default Icon styles. You can also specify custom icons through the Icon class. The constructor parameters of Marker are Point and MarkerOptions (optional).

Note: when you use a custom Icon, the geographic coordinate point of the annotation will be located in the center of the Icon used for the annotation. You can modify the calibration position through the offset attribute of Icon.

1 create a basic map with reference to the presentation map

2 add annotations to the map

The following example adds a dimension to the map center point and uses the default dimension style:

var point = new BMapGL.Point(116.404, 39.915);   
var marker = new BMapGL.Marker(point);        //  Create dimensions   
map.addOverlay(marker);                     //  Add dimensions to your map

3 add annotations to the map

Define annotation icon the icon of a user-defined annotation can be realized through the icon class. The following example is set through the icon attribute of the parameter MarkerOptions. You can also use marker Seticon() method.

var myIcon = new BMapGL.Icon("markers.png", new BMapGL.Size(23, 25), {   
    //Specify the positioning position.  
    //When a dimension is displayed on the map, the geographic location it points to is the top left of the distance Icon   
    //The corners are offset by 10 pixels and 25 pixels respectively. You can see that in this case the location is  
    //The sharp corner position at the lower center of the icon.   
    anchor: new BMapGL.Size(10, 25),   
    //Set the picture offset.  
    //When you need to capture a part from a larger picture as a callout icon, you can  
    //You need to specify the offset position of the large image, which is similar to the css sprites technology.   
    imageOffset: new BMapGL.Size(0, 0 - 25) / / set the image offset   
});     
    //Create dimension objects and add them to your map  
var marker = new BMapGL.Marker(point, {icon: myIcon});   
map.addOverlay(marker);

4 listening for annotation events

JSAPI supports listening for coverage events.

marker.addEventListener("click", function(){   
    alert("you clicked the tag");   
});

Add polyline

Polyline represents a polyline overlay on a map. It contains a set of points and connects them to form a polyline. See for details of polyline use Class reference

1 add polyline

First create a basic map by referring to the presentation map, and then add a polyline overlay to the map. The polyline cover can set the stroke thickness, color, fill color and other attributes respectively.

var polyline = new BMapGL.Polyline([
		new BMapGL.Point(116.399, 39.910),
		new BMapGL.Point(116.405, 39.920),
		new BMapGL.Point(116.425, 39.900)
	], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});
map.addOverlay(polyline);

Add Polygon

Polygon represents a polygon overlay on a map, which contains a set of points. The polygon connects this group of points in order, and finally forms a closed figure.

1 add polygon

First create a basic map by referring to the presentation map, and then add polygon covers to the map. Polygon covers can be set with stroke thickness, color, fill color and other attributes respectively.

var polygon = new BMapGL.Polygon([
        new BMapGL.Point(116.387112,39.920977),
        new BMapGL.Point(116.385243,39.913063),
        new BMapGL.Point(116.394226,39.917988),
        new BMapGL.Point(116.401772,39.921364),
        new BMapGL.Point(116.41248,39.927893)
    ], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});
map.addOverlay(polygon);

Deploy map search instance

Deploy Baidu map in vue

1. index in public Reference Baidu map API file in HTML

2. in aboutview Used in Vue file

 

Tags: Front-end

Posted by Osorene on Thu, 02 Jun 2022 02:14:03 +0530

Hot Tags

©2023 Programs Team