Shulou(Shulou.com)06/01 Report--

This article shows you how to use the JavaScript API point information display skills, the content is concise and easy to understand, absolutely can make you shine, through the detailed introduction of this article I hope you can gain something.

In this issue, Baidu Map Open Platform engineers are specially invited to give you a brief introduction to the use skills of "point information display" in JavaScript API.

Baidu Map JavaScript API (hereinafter referred to as "JS API") has a variety of call methods to meet the needs of developers, developers can choose the appropriate method according to their own needs to achieve the desired effect.

Common application scenarios

Developers can draw overlays on maps through the JS API, so the Marker introduced in this issue is one way to draw overlays.

The main application scenarios of JS API point information display include: positioning result display, nearby POI retrieval result display, background data map display, etc. On the basis of the above method, developers can also use the information window open source library provided by Baidu Map Open Platform to customize the information window with better visual effect; if too much map point information causes slow loading, you can use the point aggregation open source library to optimize the display loading, and even use the open source library of big data visualization to realize the display of massive data.

Add Marker, Marker Custom Icon and Get Marker Location

Marker Batch Add

Above we introduced several of the most common methods of Marker, by creating Marker and adding Marker can we want to show the point information on the map marked out, but if you need to add a batch of points, obviously with the above description of one by one to create add is unrealistic;

We can use arrays to store point column coordinates for circular addition:

vardata_info = [[116.417854,39.921988],

[116.406605,39.921585],

[116.412222,39.912345]];

Add Marker's message window

Display other information about the dot in a window:

When adding Marker, call the Add Info Window method, and the effect is as shown in the figure:

Marker Add Event Monitor and Marker Icon Switch Method

Executable event types for Marker:

Developers can listen for Marker object events via the addEventListener method. These events can be triggered under certain circumstances, such as when the user clicks on the Marker, you can obtain information about the Marker, and formulate different interactive operations for different Marker types according to your needs.

Of course, we can also modify the icon of the current Marker according to the requirements in the event callback function according to the Marker click event:

The above content is the dot information in JavaScript API to show how to use the skill, have you learned knowledge or skills? If you want to learn more skills or enrich your knowledge reserves, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.