Notes on the first use of Gaode map

Time:2021-4-19
preface

As the author of this paperDevelopment of map requirements for beginnersMy notes,There is no in-depth discussion, including onlyRecords of some primary API usageWith someSummary of Mengxin’s stepping on the pit

Demand Brief

There is a demand for the product. We need to use the Gaode map component to depict one or more groups of longitude and latitude coordinates in the map. At the same time, there will be a series of interactive designs. As a whole, there are not many functions – a map plus a list needs to draw multiple polygons on the map, and each record in the list will correspond to a tracing point, When the mouse covers a record, the tracing point is highlighted, and vice versa.

preparation in advance

Divide the whole page into two parts:
1. Maps
2. List: layout on the page with absolute positioning to determine the position of the list.

Map processing:
As far as the requirements are concerned, the processing on the map only needs to add polygons, tracing points and information forms. A large number of API calls and listening events are used interactively.

Data:
Gaode map: an overview of webapi
Gaud map: cover
Gaode map: Information Form

Component introduction

There are similar examples in the project, so the workload of plug-in introduction is basically zeroDirect “start development”. Through NPM installation or JS project introduction, we introduce the Gaud map plug-in.

Load map

A container with a specified ID is placed on the prepared plan page to load the map. The width and height of the container are controlled by the style. When the map is instantiated, the ID is passed in. At the same time, the map center point, zoom level, zoom level and other attributes are set.

var map = new AMap.Map('ID', { 
    //Location of the center of the map
    center:[117.000923,36.675807], 
    //Zoom level, is a range, version 2.0 seems to expand to 2-20
    zoom:11,
    // ...
});
 
 //It's easier to use it in context this.map  = XXX;
Load polygon

Call the API provided by Gaode to draw the longitude and latitude provided by the back-end students directly to the map.

let polygon = new AMap.Polygon({
    //The path is a two-dimensional array;
    path: [[lng, lat], ...],
    //The basic setting of style;
    ...
    //Bubble to map: default false, boolean type;
    bubble: false,
    //Map instance: the map instance created before, this.map ;
    map: this.map,
    //User defined type, any;
    extData: {
        //I think this attribute is too useful
    },
});
Marker & infowindow

Too few notes like this,It’s like moving to the official website, try not to record the instantiation process. Hang up the coverage class document on the official website — Gaode map: coverage class

Development process notes

At first glance, there are not many requirements. It seems that there are only two function points. However, it takes a lot of brain to implement them. Fortunately, the documents are very comprehensive. If you look at them patiently, a certain attribute can help solve the thorny problem.

Custom attribute extdata

There are too many overlays on the map. A polygon has N tracing points, one tracing point and one information form. If you want to get the corresponding data quickly and conveniently, when instantiating the overlay object, you can bundle the corresponding user-defined information. If you find the overlay, you can get the information you want, and you don’t have to think of any extra way to access it.

//Get custom information
map.getExtData();

//Set custom information
map.setExtData()

Of course, this is mainly done when referencing. When instantiating, it can be hung under the extdata attribute. Polygons and trace points all have this attribute, or coverings all have this attribute.

let polygon = new AMap.Polygon({
    ...
    extData: {
         //Any type
    },
    ...
});
Take a cover

At present, the way to think of is to take a certain type of covering and query it from the user-defined attribute. This is because it happens that in the demand, the polygon has a corresponding unique ID, and the tracing point also has an independent unique ID, and so does the information form.If it’s not like this again, think of a wayThe overlay instance has its own ID, which is also a good way to query.

/* 
*If you do not pass parameters in brackets, you will get all the covers, and you can pass in a type
*Parameter types are strings, such as polygons, stroke points, etc
*/
this.map.getAllOverLays();

/**
*The returned value is an array that can be traversed with the for loop
*In the process of traversal, you can look up a specific cover
*/
this.map.getAllOverLays().forEach( map => {
    if (map.getExtData().extData === "") {
        // do ...
    }
});

/**
*Note that when you get additional information, the type is arbitrary. Please pay attention to the value method
*/
Remove the cover

Can pass map.remove Method to remove one or more covers. The parameter passed in is the cover instance. If you need to remove more than one cover at a time, you need to pass it in the form of an array

//Remove a marker
map.remove(marker);

//Remove one marker and one polygon at a time
map.remove([marker, polygon]);
Get coverage
//Take polygon as an example to get a range
polygon.getBounds();

/**
*What you get is a range, in which you can get the desired latitude and longitude
*/
Determine whether the point is in the current polygon
//Determine whether the point to be drawn is within the specified area
polygon.contains(point: LngLat);

/**
*What is returned is a boolean, and the receiving parameter is a coordinate. According to the coordinates, it is necessary to judge whether it is within the scope of the current polygon, and the type of coordinates needs to be lnglat
*
*You can avoid drawing outside the specified range
*/
Lnglat class

Longitude and latitude coordinates to determine a point on the map. (official document)
It can be used to construct longitude and latitude coordinate object, which is convenient and better to determine a coordinate on the map. When you need to pass in a coordinate, you’d better build an instance of lnglat.

const lngLat = new AMap.LngLat(lng:Number,lat:Number,noAutofix:bool);

/**
*LG:: longitude
*
*Lat: latitude
*
*Noautofix: whether to automatically correct the longitude to [- 180180], the default value is false,
*/
Use of setfitview

Having the specified map instance or overlay appear in the middle of the field of view automatically adjusts a suitable zoom and center point.

map.setFitView()

//If not, all the covers will be adjusted to the right position
//If an instance is passed in, only one instance will be adjusted
//If you want to adjust more than one, pass in an array
Excavation record
Binding and removing event listening

The event listening and removing declaration should be consistent, otherwise it will be impossible to remove the event listening. If you want to bind a context object, you can use the third parameter instead of using methods such as bind at the second parameter.

map.on('type', method, context);
Update customized data in time

In the project, due to the use of a large number of user-defined data, it was not updated in time at first, which led to the situation that there was no change in the data processing, especially the user-defined data came from a frequently changing array.

//Brief introduction

//Get a list of people from the request
userList: [ ... ];

//Bind to custom data
const poylgon = new AMap.Polygon({
    ...
    extData: {
      userList,
    },
    ...
});

//In the process, the list is operated, the original data of the list is changed, and the user-defined data is updated
polygon.setExtData({
  userList: updatedUserList,
});
The style name of the information form

In fact, it’s an HTML string. You have to use class, so don’t mix it up. Take react as an example. Remember not to use classname habitually,


Scc
GitHub: young

Recommended Today

How does the new azure communication service (ACS) implement webrtc?

This article is from Gustavo Garcia, a software engineer of housepat. He has made a comprehensive evaluation of azure communication service (ACS), including browser compatibility, codec and bandwidth estimation algorithm. Compared with his main competitors, there is still a gap in maturity. By Gustavo Garcia Translated by Helen Lyu Original link/https://webrtchacks.com/how-d… We have a long […]