How can I draw lines with arrows using Baidu map JSAPI?

Source: Internet
Author: User
Baidu map JSAPI provides two ways to draw multi-line lines. One is to know that multi-line coordinate strings are added through the AddOverlay interface; you can also draw a toolbar by clicking on the map ). Currently, these two methods can only draw multiple line, and cannot draw at the same time... syntaxHighlighter. all (); Baidu map JSAPI provides two ways to draw multi-line, one is known multi-line coordinate string through AddOverlay interface to add; you can also draw a toolbar by clicking on the map ). Currently, the two methods can only draw multi-line lines, and cannot draw line arrows at the same time. The following describes how to draw arrows at the turning point online for reference. The final result is as follows: 1. Draw the arrow Method: In, the line segment AB is added by drawing the line through JSAPI. As long as the CBD is drawn, the arrow effect can be achieved. To draw arrows flexibly, You need to customize the arrow length (r) and angle (angle ). Implementation steps are as follows: variable definition: pixelStart: screen coordinates of one end of the line, pixelEnd: screen coordinates of the arrow end of the line, and r: Select multiple long-distance draw arrows (in pixels, not the length of the arrow corresponding to CB, but the distance corresponding to the red line segment); angle: the angle between the arrow line (CB or DB) and AB. 1) First, convert the longitude and latitude coordinates of point A to the screen coordinates. 2) then, the screen coordinate pixelTem of the green and small green points is calculated based on the screen coordinates of the AB two points and the r length. 3) Then, based on the screen coordinates and angle angles of B and small green points, the screen coordinates of C and D are calculated. 4) use the map coordinate transformation method to convert the screen coordinates of the C and D points into the coordinates represented by the longitude and latitude. 5) Draw multiple lines in the CBD using the line drawing method. Note: The idea is very simple. It is difficult to calculate the screen coordinates of small green spots, C and D. The formulas used to calculate these points come from the mathematical formulas of junior high school. The complete code is as follows: [html]

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.