Mapbar--mark the location of the vehicle on the map in real time

Source: Internet
Author: User

is doing a real-time vehicle tracking dongdong, the vehicle position is real-time change, need to mark the location of the vehicle on the map,
In fact, the practice is very simple, if it is MAPX or other map control, directly add a layer, and then draw on the layer of vehicles on the line,
But Mapbar, although Mapbar can provide the annotation function, but that annotation information needs to write the map information database,
Can not realize the real-time change of the location of the vehicle, because the client is scripted, for some location processing, must use the script,
So you can try to draw the vehicle position on the map and draw your own
This has to know the latitude and longitude of the map, because the initial position can set the vehicle location for the map center point, and then in the center point display location,
Here you can refer to the map provided by the Mmarker object, Mmarker is used to mark the location, here to say some of the Mapbar map properties and methods,

var maplet = null;
var marker = null;

function Initmap () {
Maplet = new Maplet ("Mapbar");
var sa = new Array ();
for (var i in Maplet) {
var s = I.htmlencode ();
var v = maplet[i] + "";
v = V.htmlencode ();
if (i.length<20) {
s = s + "";
s = s.substr (0,20);
}
Sa[sa.length] = S.htmlencode () + "" + V;
}
Sa.sort ();
var ss = Sa.join ("<br>");
var win = window.open ();
Win.document.write ("<pre style= ' font-size:9pt ' >" + SS + "</pre>");
}

The code format for adding annotations is:

var marker = new Mmarker (
Point
New Micon (".. /images/test.gif ", 32,32)
);
Maplet.addoverlay (marker);

The key here is how to set the first parameter of the Mmarker constructor.
We need to know the format of the first parameter, unfortunately the script cannot get the exact type of the parameter.
However, you can refer to the statement that sets the center point:

Maplet.centerandzoom (New Mpoint (108.1911,22.4912), 10);

Here the parameter one is the point, the point is the latitude and longitude, that mmarker the first parameter is also this kind of format.
We try to pass this parameter to see:

var marker = new Mmarker (
New Mpoint (108.1911,22.4912),
New Micon (".. /images/test.gif ", 32,32)
);
Maplet.addoverlay (marker);

The test can really be labeled in that position, so that when you add the annotation,
Even if you move the map, move the callout out of the visible area, and then move into the visible area, and the callout point is still visible,
If you do not use the map annotation function, you draw a point on the above, you have to do screen coordinates and latitude and longitude of the transformation, and control whether visible,
Now that the map provides the annotation function, it is more convenient to use the ready-made directly.

Interested can study the control of the client, and can add some practical functions,
For example, on the map to draw the vehicle for a period of time travel routes.

Note that when you add a callout, there is a small bug where the callout's icon area does not accept mouse events.

Icon added up, then how to add text description, vehicle location tracking, but also show the car number ah, if there are more than one car.
Do not know whether to provide the ability to display text, there are two ways, one is to put the text on the icon (text to create a picture),
Another way is to display text based on its icon position.

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.