Virtual Earth map control

Source: Internet
Author: User

Virtual Earth map control SDK 6.1
Show Map

The first step to use the Virtual Earth map control is to display a map on the website.

Show default map
To display a default map containing all navigation functions, complete these steps:

Add the following doctype declaration at the top of the HTML page.

Copy code
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Add a meta element in the title section of the HTML page, set its charset attribute to "UTF-8", as shown below.

Copy code
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"> note:
The page must be encoded in UTF-8 to draw a specific element of the map.

You can also add a reference to the map control in the title section, as shown below.

Copy code
<SCRIPT type = "text/JavaScript" src = "http://dev.ditu.live.com/mapcontrol/mapcontrol.ashx? V = 6.1 ">
</SCRIPT> in the body of the page, add a div element to the page to contain the map. The size of a map is defined by the height and width of the DIV element. Use the "location", "TOP", and "Left" attributes to set the location of the map. You can set these values in two ways: one is to specify a value directly in the property, the other is to define these values in the style class, and then reference the class, as shown below.

Copy code
<Div id = 'mymap' style = "position: absolute; width: 400px; Height: 400px;"> </div> or

Copy code
. Map {
Position: absolute;
Top: 20;
Left: 10;
Width: 400px;
Height: 400px;
Border: #555555 2px solid;
}
...
<Div id = "map" class = "map"> </div> note:
If no width is specified, the default width is 600 pixels. The default height is 400 pixels. To achieve compatibility between different browsers, always specify the location attribute ("absolute" and "relative" are valid values ). If the percentage width and height are used in the map Div, they are the percentages of the width and height relative to the parent element, respectively.

Create an instance for the vemap class and call the vemap. loadmap method, as shown below.

Copy code
VaR map = new vemap ('mymap ');
Map. loadmap (); note:
In most cases, you must call the loadmap method before calling the vemap method or attempting to access the vemap attribute. However, there are some exceptions that require calling after the vemap object is created and before the loadmap method is called for the new object, as shown below:

Vemap. onloadmap attributes

Vemap. setdashboardsize Method

Customize a map when it is loaded
You can also specify the location, zoom level, and style of the map when loading the map for the first time. To complete the preceding tasks, use the overloaded vemap as follows. the loadmap method function is used to transmit the location, zoom level, map style, whether the map is locked, map mode, whether to display the map mode switch, and how large the graph block buffer is needed to display the surrounding area of the map.

Copy code
VaR map = new vemap ('mymap ');
Map. loadmap (New velatlong (39.8540, 116.237), 10, vemapstyle. Road, false, vemapmode. mode2d, true, 1); example
The following is an example of a complete webpage (containing all the elements required to display a map.

JScript copy code

  1. <! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <HTML>
  3. <Head>
  4. <Title> </title>
  5. <Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8">
  6. <SCRIPT type = "text/JavaScript" src = "http://dev.ditu.live.com/mapcontrol/mapcontrol.ashx? V = 6.1 "> </SCRIPT>
  7. <SCRIPT type = "text/JavaScript">
  8. VaR map = NULL;
  9. VaR LA = new velatlong (39.8540, 116.2370 );
  10. VaR pinpoint = NULL;
  11. VaR pinpixel = NULL;
  12. Function getmap ()
  13. {
  14. Map = new vemap ('mymap ');
  15. Map. loadmap (La, 14, vemapstyle. Road, false, vemapmode. mode2d, true, 1 );
  16. Addpin ();
  17. }
  18. Function getinfo ()
  19. {
  20. VaR Info;
  21. VaR center = map. getcenter ();
  22. Info = "zoom level:/t" + map. getzoomlevel () + "/N ";
  23. Info + = "latitude:/t" + center. Latitude + "/N ";
  24. Info + = "longpolling:/t" + center. longpolling;
  25. Alert (Info );
  26. }
  27. Function addpin ()
  28. {
  29. // Add a new pushpin to the center of the map.
  30. Pinpoint = map. getcenter ();
  31. Pinpixel = map. latlongtopixel (pinpoint );
  32. Map. addpushpin (pinpoint );
  33. }
  34. </SCRIPT>
  35. </Head>
  36. <Body onload = "getmap ();">
  37. <Div id = 'mymap' style = "position: relative; width: 400px; Height: 400px;"> </div>
  38. <Input id = "btngetinfo" type = "button" value = "Get scene information" name = "getinfo" onclick = "getinfo ();">
  39. <Br/>
  40. (Click to get latitude/longdistance and zoom level)
  41. </Body>
  42. </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.