This is the third day of my participation in the August More text Challenge. For details, see:August is more challenging

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: I use Baidu Map Javascript API 3.0. This article is a continuation of the previous use, and continues to summarize and summarize some uses of Baidu Map API. This time, I mainly introduce the events and route planning on the map. If there is a small partner has not seen before the Basic use of Baidu map API (1) | More text challenge in August, Baidu map API basic use (2) | more text challenge in August, you can first go to watch, the early need for some preparation, as well as some 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

If you want to further study the avaScript API 3.0 method parameters of Baidu Map, you can use the following category reference baidu Map avaScript API V3.0 category reference. Other versions of the API can be found in the development documentation under the category Reference category, please find by yourself

However, note that the instance center uses BMap to create the container. The latest version of the GL map namespace is BMapGL. You can control the map rotation and change the tilt Angle by holding down the right mouse button.

BMapGL introduces apis in the following ways:

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

BMap introduces the API as follows:

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

Quote to your own needs

All right, let’s cut to the chase

Baidu Maps API- Events

1. Map events

This event is called after the map has been loaded, so we can do something about it.

var map = new BMap.Map('container');
map.centerAndZoom(new BMap.Point(116.404.39.928), 15);
map.enableScrollWheelZoom(true);
map.addEventListener('tilesloaded'.function () {
    alert('Map loading complete! ');
});
Copy the code

The effect is that after the map is loaded, it will pop up a reminder that the map is loaded! The actual application may involve some map based initialization. Specific case specific analysis, do not do too much detail.

2. Map Click Event As the name implies, this event is triggered when we click on the map.

var map = new BMap.Map('container');
map.centerAndZoom(new BMap.Point(116.404.39.928), 15);
map.enableScrollWheelZoom(true);
map.addEventListener('click'.function (e) {
    alert('Click on location longitude and latitude:' + e.latlng.lng + ', ' + e.latlng.lat);
});
Copy the code

So what we’ve done is that when you click on the map, it triggers, and you get the latitude and longitude of that point. And some of the events that we’ve been covering, basically using this click event, using the addEventListener to listen for click, and this method also listens for other events, so I’m not going to give you an example, but just to show you some of the events that you can listen for, These are found in the official class reference.

The logout method is also simple. The last click event was implemented using addEventListener click. The logout method is actually to remove the event. The corresponding implementation is removeEventListener listening for click to remove the click event.

var map = new BMap.Map('container');
map.centerAndZoom(new BMap.Point(116.404.39.928), 15);
map.enableScrollWheelZoom(true);
function showInfo(e) {
    alert(Longitude and Latitude: + e.latlng.lng + ', ' + e.latlng.lat);
}
// Add a map click event
function addMapEvent() {
    map.addEventListener('click', showInfo);
}
// Remove the map click event
function removeMapEvent() {
    map.removeEventListener('click', showInfo);
}
Copy the code

If you want to study more detailed map events, you can view the research events – map events

2. Covering events

1. Overlay mouse Event This overlay mouse event is essentially a map click event, but the object is replaced with a overlay object, essentially using addEventListener to listen for events to occur. Create a point and a surface overlay, and then add mouse click events to both overlay

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

/ / draw point
var marker = new BMap.Marker(point);
map.addOverlay(marker);

/ / draw faces
var polygon = new BMap.Polygon([
    new BMap.Point(116.387112.39.920977),
    new BMap.Point(116.385243.39.913063),
    new BMap.Point(116.394226.39.917988),
    new BMap.Point(116.401772.39.921364),
    new BMap.Point(116.41248.39.927893)] and {strokeColor: 'blue'.strokeWeight: 2.strokeOpacity: 0.5
});
map.addOverlay(polygon);

// Add a click event to the dot
marker.addEventListener('click'.function(){
    alert(marker.toString() +  'Is clicked! ');
});
// Add a click event to the face
polygon.addEventListener('click'.function(){
    alert(polygon.toString() +  'Is clicked! ');
});
Copy the code

If you want to study more detailed covering events, you can check out the study event-covering events

Baidu Map API- route planning

First of all, the route planning is divided into four kinds, namely, driving route planning, bus route planning, walking route planning, and cycling route planning. The classes used are different. Let’s take a look.

1. Driving route planning

1. Basic driving route planning service example: Code as follows:

var map = new BMap.Map("container"); 
map.centerAndZoom(new BMap.Point(116.404.39.915), 14); 
var driving = new BMap.DrivingRoute(map, { 
    renderOptions: { 
        map: map, 
        autoViewport: true}});var start = new BMap.Point(116.310791.40.003419);
var end = new BMap.Point(116.486419.39.877282);
driving.search(start, end);
Copy the code

The driving navigation service also provides rich data interfaces. Through the onSearchComplete callback function, we can get the BMap.DrivingRouteResult object, which contains the driving navigation result data information. The result is a number of driving scenarios, each with a number of driving routes. Each driving route contains a series of key steps (MBAP.step) that describe the specific driving plan.

var map = new BMap.Map("container"); 
map.centerAndZoom(new BMap.Point(116.404.39.915), 14); 
var options = { 
    onSearchComplete: function(results){ 
        if (driving.getStatus() == BMAP_STATUS_SUCCESS){ 
            // Get the first solution
            var plan = results.getPlan(0); 
            // Obtain the driving route of the scheme
            var route = plan.getRoute(0); 
            // Get each key step and output it to the page
            var s = []; 
            for (var i = 0; i < route.getNumSteps(); i ++) { 
                var step = route.getStep(i); 
                console.log(step); }}}};var driving = new BMap.DrivingRoute(map, options);
var start = new BMap.Point(116.310791.40.003419);
var end = new BMap.Point(116.486419.39.877282);
driving.search(start, end);
Copy the code

2. Bus route planning

The BMap.TransitRoute class provides bus route planning services. . Note: v3.0, added TransitRoutePlan getTotal and TransitRoutePlan getTotalType method, can get a bus for solution to the total number of sections (+ bus) on foot, and specify the road transportation types (or bus) on foot.

1. The example code for using the service is as follows:

var map = new BMap.Map("container"); 
map.centerAndZoom(new BMap.Point(116.404.39.915), 14); 
var transit = new BMap.TransitRoute(map, { 
    renderOptions: { 
        map: map, 
        autoViewport: true}});var start = new BMap.Point(116.310791.40.003419);
var end = new BMap.Point(116.486419.39.877282);
transit.search(start, end);
Copy the code

2. The code of cross-city route planning is as follows:

var map = new BMap.Map("container"); 
map.centerAndZoom(new BMap.Point(116.404.39.915), 14); 
var transit = new BMap.TransitRoute(map, { 
    renderOptions: { 
        map: map, 
        autoViewport: true

    },

    // Configure the intercity bus to start early

    intercityPolicy: BMAP_INTERCITY_POLICY_EARLY_START,

    // Configure the intercity bus mode policy as aircraft first

    transitTypePolicy: BMAP_TRANSIT_TYPE_POLICY_AIRPLANE

});

var start = new BMap.Point(116.310791.40.003419);
var end = new BMap.Point(121.490546.31.233585);
transit.search(start, end);
Copy the code

3. Route planning

BMap.WalkingRoute provides WalkingRoute planning services. The basic usage is similar to driving route planning. Example code for using a service is as follows:

var map = new BMap.Map("container"); 
map.centerAndZoom(new BMap.Point(116.404.39.915), 14); 
    var walk = new BMap.WalkingRoute(map, { 
    renderOptions: {map: map} 
}); 
var start = new BMap.Point(116.310791.40.003419);
var end = new BMap.Point(116.486419.39.877282);
walk.search(start, end);
Copy the code

4. Cycle route planning

BMap.RidingRoute provides cycling route planning service, the basic usage is basically the same as walking route planning. Example code for using a service is as follows:

var map = new BMap.Map("container"); 
map.centerAndZoom(new BMap.Point(116.404.39.915), 14); 
var riding = new BMap.RidingRoute(map, { 
    renderOptions: {map: map} 
}); 
var start = new BMap.Point(116.310791.40.003419);
var end = new BMap.Point(116.486419.39.877282);
riding.search(start, end);
Copy the code

Interested partners can study baidu Map Javascript API 3.0 travel route planning Baidu Map JS API example route planning

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.