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

PS: This article is a continuation of the previous use, continue to use some of the Baidu Map API to do a summary and summary, this is mainly on the map covering this section to do an introduction, if there are small partners have not seen before the Baidu map API basic use (a) | August more text challenge, You can go and look at some of the things that you need to do up front, some of the basic usage.

Interested partners can view baidu map official documentation Baidu map open platform development documents in the JavaScript API

You can also see some of the use of baidu Map API more intuitively through the example center below, as well as some of its features baidu Map Open platform – Example Center

Note: The instance center uses BMapGL to create the container. The latest version of the GL map namespace is BMapGL. You can hold down the right mouse button to control the map rotation and change the tilt Angle.

Since BMapGL is used this time, the API is introduced in a different way as follows:

<script type="text/javascript" src="/ / api.map.baidu.com/api?type=webgl&v=1.0&ak= your key"></script>
Copy the code

All right, let’s cut to the chase

Baidu Map API- overlay

Before we talk about coverings, let me tell you how to add and remove coverings. This is a general method. The following types of coverings are added and removed using the same method. After we get the container and create our own covering object according to our needs, we can use the container object if we need to add covering objects. Use only the container object if we need to remove coverings. ClearOverlays (); You can remove all of them, but to remove just one overlay, you need to use a container object.

The following is a code example:

// Create a container
var map = new BMapGL.Map('allmap');
var point = new BMapGL.Point(116.404.39.915);
map.centerAndZoom(point, 15);
// Create point coverings
var marker = new BMapGL.Marker(new BMapGL.Point(116.404.39.915));
// Add mulch
map.addOverlay(marker);
// Remove the specific covering
map.removeOverlays(marker);
// Remove all coverings
map.clearOverlays();
Copy the code

1. Dot the mulch

The Marker method is mainly used for Point coverage, for example: var marker1 = new bmapgl.marker (new bmapgl.point (longitude, latitude)); This creates a point covering object, and we need to add the covering to the container, the container object, using the method of adding the covering described above. Therefore, the attribute enableDragging (OK) is required, which is false by default, that is to say, in the above default creation methods, the attribute is false, which is the literal meaning of the attribute and it is easy to understand that dragging is supported, so if there is a requirement for dragging, we just need to set the whole attribute to true.

The following is a code example:

var map = new BMapGL.Map('container');
map.centerAndZoom(new BMapGL.Point(116.404.39.928), 15);
map.enableScrollWheelZoom(true);
// Create a dot tag
var marker1 = new BMapGL.Marker(new BMapGL.Point(116.404.39.925));
var marker2 = new BMapGL.Marker(new BMapGL.Point(116.404.39.915), {enableDragging: true
});
// Add a dot to the map
map.addOverlay(marker1);
map.addOverlay(marker2);
Copy the code

The above implementation is to anchor the covering by longitude and latitude, and to be drag-and-drop via the enableDragging attribute. If our requirement is for the dot overlay not to use the default red dot, but to use an image of a car or something, then we need to customize the dot overlay and initialize the dot overlay with the icon that we introduced, do we modify it

The code is as follows:

var map = new BMapGL.Map('container');
var point = new BMapGL.Point(116.404.39.915);
map.centerAndZoom(point, 15);
// Create the trolley icon
var myIcon = new BMapGL.Icon("/jsdemo/img/car.png".new BMap.Size(52.26));
// Create Marker and use the car icon
var pt = new BMapGL.Point(116.417.39.909);
var marker = new BMapGL.Marker(pt, {
    icon: myIcon
});
// Add the annotation to the map
map.addOverlay(marker);
Copy the code

You may also need to add a click event to the point overlay, which is relatively simple to implement. Just go to the code:

var map = new BMapGL.Map('container');
var point = new BMapGL.Point(116.404.39.925);
map.centerAndZoom(point, 15);
// Create a dot tag
var marker = new BMapGL.Marker(point);
map.addOverlay(marker);
// Create an information window
var opts = {
    width: 200.height: 100.title: The Palace Museum
};
var infoWindow = new BMapGL.InfoWindow('Address: 8th Floor, Lotte Intime Department Store, 88 Wangfujing Street, Dongcheng District, Beijing', opts);
// Add a click event to the dot tag
marker.addEventListener('click'.function () {
    map.openInfoWindow(infoWindow, point); // Open the information window
});
Copy the code

The realization effect is shown in the figure below:If you want to study more detailed point coverings, you can check out the study yourself

Mulch. – Dot mulch

2. Vector graphics coverings

var map = new BMapGL.Map('container');
var point = new BMapGL.Point(116.404.39.915);
map.centerAndZoom(point, 15);
map.enableScrollWheelZoom(true);

/ / draw faces
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)] and {strokeColor: 'blue'.strokeWeight: 2.strokeOpacity: 0.5
});
map.addOverlay(polygon);
/ / draw the line
var polyline = new BMapGL.Polyline([
    new BMapGL.Point(116.399.39.910),
    new BMapGL.Point(116.405.39.920),
    new BMapGL.Point(116.423493.39.907445)] and {strokeColor: 'blue'.strokeWeight: 2.strokeOpacity: 0.5
});
map.addOverlay(polyline);
/ / draw circle
var circle = new BMapGL.Circle(new BMapGL.Point(116.404.39.915), 500, {
    strokeColor: 'blue'.strokeWeight: 2.strokeOpacity: 0.5
});
map.addOverlay(circle);
Copy the code

The realization effect is shown in the figure below:There are also hollowed-out drawings, Bezier curves, and 3D prisms, which can be viewed and studied by interested friends

Coverings – Vector graphics coverings

3. The overlay

Overlay layer is not currently applied in the project, so this part will not be expounded too much, interested partners can check their own research

Mulch – a stacked layer

4. Information window

InfoWindow: information window. It is also a special covering, which can display richer text and multimedia information. Note: Only one information window can be open on the map at a time. The information window is the HTML content displayed floating above the map, which can be directly opened at any position on the map or on the annotation object (at this time, the coordinates of the information window are consistent with the coordinates of the annotation). Note: Only one information window can be open on the map at a time.

// Baidu Map API function
	var map = new BMapGL.Map("allmap");
	var point = new BMapGL.Point(116.404.39.925);
	map.centerAndZoom(point, 15);
	
	var marker = new BMapGL.Marker(point);  // Create the annotation
	map.addOverlay(marker);              // Add the annotation to the map
	var opts = {
	    width : 200.// Information window width
	    height: 100.// Information window height
	    title : "The Palace Museum" , // Information window title
	    message:"This is the Forbidden City."
	}
	var infoWindow = new BMapGL.InfoWindow("Address: 8th Floor, Lotte Intime Department Store, 88 Wangfujing Street, Dongcheng District, Beijing", opts);  // Create an information window object
	marker.addEventListener("click".function(){          
		map.openInfoWindow(infoWindow, point); // Open the information window
	}); 
Copy the code

There is also a combination of text and text type, information window with retrieval function, interested partners can view the research cover – information window

5. Right-click menu

var map = new BMapGL.Map('container');
map.centerAndZoom(new BMapGL.Point(116.403694.39.927552), 12);
map.enableScrollWheelZoom(true);
var menu = new BMapGL.ContextMenu();
var txtMenuItem = [
    {
        text: 'Zoom in one level'.callback: function () { map.zoomIn(); }}, {text: 'Reduce one level'.callback: function () { map.zoomOut(); }}];for (var i = 0; i < txtMenuItem.length; i++) {
    menu.addItem(new BMapGL.MenuItem(txtMenuItem[i].text, txtMenuItem[i].callback, 100));
}
map.addContextMenu(menu);
Copy the code

6. Trajectory motion

The code is as follows:

<! DOCTYPEhtml>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="Initial - scale = 1.0, the user - the 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>
    <script type="text/javascript" src="//api.map.baidu.com/library/LuShu/gl/src/LuShu_min.js"></script>
	<title>Earth route book</title>
</head>
<body>
	<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
	// Baidu Map API function
	var map = new BMapGL.Map("allmap");
	var point = new BMapGL.Point(116.404.39.925);
	map.centerAndZoom(point, 4);
	map.enableScrollWheelZoom();
    function startLushu() {
        var fly = 'data:image/png; base64,iVBORw0KGgoAAAANSUhEUgAAAC0AAAAwCAYAAACFUvPfAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6m AAAF3CculE8AAAACXBIWXMAACcQAAAnEAGUaVEZAAABWWlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZ XRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS40LjAiPgogICA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5b nRheC1ucyMiPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczp0aWZmPSJodHRwOi8vbnMuYWRvYmUuY29tL 3RpZmYvMS4wLyI+CiAgICAgICAgIDx0aWZmOk9yaWVudGF0aW9uPjE8L3RpZmY6T3JpZW50YXRpb24+CiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICA8L 3JkZjpSREY+CjwveDp4bXBtZXRhPgpMwidZAAAHTUlEQVRoBdVZa2gcVRQ+Z2b2kewm203TNPQRDSZEE7VP1IIoFUFQiig+QS0tqEhLoCJIsUIFQUVBpFQUH /gEtahYlPZHIX981BCbppramjS2Jm3TNNnNupvsZnfmHs+dZCeT7M5mM5ugHpjdmfP85txz7z17F+B/SOgGMxFhby94L/tBkfbLUiAaG3HCjS83Nq5A9/SQL xEeewUJN5BCAgliBtCzG6orfncDYr42ZqbmaySzikA+QLqZAd/C9ltUwGc6iDzz9eVG3xXoyUD4I3+TLej93uj47bbnRbt1DVohPMmoRm3IKoRBrd1DQ0Ebb 1FuXYMmQ/QzogszUCHclsbyu2fwFuHBNejI8mAEAE/NwuRFhNauwXjNLP6CProGvRlRB4SuPGhuECpuzcNfMJZr0BIBChN0JgcN4pOdQ7HGHP4CMUoCraPoY RxcJjOJl8OrUFF3fkGkzpQszFNJoEnJyIl41gHKow3DiZsdZCWxSwK9saoqxtG7HRCEVYRdHReo3EHumq1Jy24irz481koKiEAksH8+fQSXQhfxjMxHzL9D8 yW2sOzzfHK3PDPTsQFQCeke3t9eHgsn75yfM5SZTjrY+EEoO0+MjoYd5K7YJujQKjAAMcoeuHcQezoiybpivRmq2su6lxz1kTYZuvqwo9yFwATdgpjmNuL8l P16TYhn2ojM0pnLZ3jUf4mLQwJ3Ii5t3HEsmrzCSWG+/OmJSAoDzxJtrxpO3Jd9KvRdX48pIjhRSIdlzaowdsg+fA69osRWNgmo3+YxIAB3d0aTR9eFy87O5 UlR4RgJs+OzXNjbP2lvCHjs58vxg3u7u9sD+lKPR8EgKoZPyuRQIGkT5eVjo9vq61OSV4isIF3D8ad4tr8plbPMDNFbv0Tiz08owk9pxRwVDTSvgaKae2kzo MHqNV7t1rBXe47tPAyWMkJMsK28ZzwAOkE6LYSS1KlvQogL/HoaB6liUcAWLskrETdheJxdHCHN91Nr49K/WZ5DWXzQdTn+ECF+yoGUeMaAaFqHWMYYj+l6D xBWMD87KvJbtp/Zhl/6kPfW7se6eckKlkea0Q3I8HAE/B7gcpOrUTun/91MwPjy6dWrZ6xOlp8T0eStqYx+qH88XXYplQHOlOnaUsgTaKFYyK1h22/noKPvI ty1/ipoXlUtgUtK8zT4Aj367tbGVQPZeNZEPJdIBk7HU8r5ZBpkecpxlZeS51r4FyGoq67kuhfw1c+nYSg2zkVuRuFWlx4BXX1n36nB+ixoU7K3jbSq2osfc U0/vJyHZwVfhWich7EvMcG16lQIhazzy1TOzsmBEXi/rQvuvaEJNjWtBCFs/hE+jlys3b53M+pWpvO7+g9xCZZAzUkTrzXS356N3BU1jC95AvpkSRQimWBbD gqpFiWTlXBmcBQOHP0ddB7FJ25fBzWhANf1ZBQuleNkGNtbW1Z2SodWputCZYmmCr9YWeZlJoLB+vKSIzT7mnRVFJ4ilRD+Go6ByqvqvTc2QU1leRawnF6Hu MfYmgUsHVo5PT4Sf5CXNrnkqbYlLxnL6H+wmn3J43fCIHs11+kpVHIZlJfpz+mlrGBTRvavNC95MstTS548rfqVE/2BmEh9umtdvf1Xv7X28l4BVRKwdBzyq ObFy96H3cOxPTENyrKbi/ComiYM1kW5MYAuSNSWezeFNeUFxuyXPE6PPmEIgzcen/THfnnDoUxCN/pSBg0yi9nyYAflBmP22z5VHfNpynn2+5tcAZH0H3Y2r xpheQ7J7EwSMQgZgWkqU78yvFe2XpPXsG9Sc/LzRCRRx9t4TuZtGeecQJR3w8cPX+5vr6ysVH1/++RmFNRB93KmUDfUVCg4HttWxDZugebdkNtRK8w4R3lpb RF9h4TNNb+Ov6ZeWXJyibP3yY3LKn64qabFCsJaiVzNuTnWROSf1t5pdXwvUh04MP3sfPfnn+Tnd73eWcOUnBSKuo9XATvgOUycxSZo8+CQcMWUWqeuKK9tl ucaRdBIKFXDoBsKqPIiRPvXh8vOFdCZl8gEnR6QE5KWsiWfYdCLG6vK/irWi0foDVwYtY76hD95PeIzR7kLgVnT8ueWPoxf89h9FRgNfjcfP2zTwvplDjZ8J Cz2t4RCOWcjDvpFsU3Qkz+34LWiLGYrEa5xmoLcHx/OZIIHZ5uU+jw9EV14OjoyUsmAr3UwjXIxv75xBY47yF2zSwLtIe9KjnylQ/SPe6uD3zvISmKXBFojp YGjy11tBvGudgZI7H8AkTfFhaeSQPNv6zUMKbf5Jnp77bJK7lkWh1yDnjoXWZsHVrsm4KM8/AVjuQYdGkzwURc1zUIiz072Xbc86HziNMvAzaNr0KqmrOaAc iLaqc1PyW/sjMW4N9dpN475wLKZ7ZZM22KCe/g3rq5aFp/mLc6d60xzN7mJIdk6OzqQDpcfWRyYM726yrT5NzOMZfhv5u9tfzO/uhGRe5fFJ1umig8mDxL/z T/0i0f6H9L8B7n+trJOMfuMAAAAAElFTkSuQmCC';
        lushu = new BMapGLLib.LuShu(map, polyline.getPath(), {
            geodesic: true.autoCenter: true.icon: new BMapGL.Icon(fly, new BMapGL.Size(48.48), { anchor: new BMapGL.Size(24.24)}),speed: 1000000.enableRotation: true
        });
        setTimeout('lushu.start()'.4000);
    }
    var path = [
        new BMapGL.Point(116.617562.40.0823),
        new BMapGL.Point(37.700058.55.850864)];var polyline = new BMapGL.Polyline(path, {
        clip: false.geodesic: true.strokeWeight: 3
    });
    map.addOverlay(polyline);
    startLushu();
</script>
Copy the code

Trajectory motion also has 3D and perspective animation, if interested partners can view the research covert-trajectory motion

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.