Author: Webmaster Collection Tutorial Source: Network hits: 2 Update time: 2005- 12- 17
Since Google launched the map service, Microsoft and Baidu have also launched the map service. Maps have become a popular fashion on the Internet. If you want to catch up with it, come on, and I will help you learn to use Microsoft's virtual earth map control to add a beautiful landscape to your website.
The final rendering of this article:
MapControl control
The virtual earth map control script can be downloaded from MSN website:/js/mapcontrol.js.
Of course, you can link this script directly in the website, but this will lead to some security problems, because by default, most browsers will not allow JavaScript programs from other websites that are not currently visited to run. Users must confirm that they allow scripts from VirtualEarth to run, which will give users an unpleasant feeling.
The simple way is to download the MapControl.js file to your site, so that it can be easily accessed and programmed.
Create an instance of a map control
In order to create an instance of a map control, you need to write a small method in the page. This will create an instance of Mapcontrol, put it on the page, and set the content initially displayed in the control.
The constructor prototype of VE_MapControl is as follows:
VE_MapControl (latitude, longitude, zoom, map style, location type, left, top, width, height);
Latitude: the latitude of the center of the map displayed in the control;
Longitude: the longitude of the center of the map displayed in the control;
Zoom: Displays the scale of the map. Can be set to a number between 2 and 18. 2 is the farthest allowable overlooking distance, and 18 is the nearest allowable overlooking distance.
MapStyle: displays the style of the map. At present, there are three styles to choose from: aerial photography, highway and mixed. Use lowercase letters of each style to represent styles.
In the air: satellite images are displayed at high altitude.
R-road: shows the street map of the area;
H-hybrid: It shows the combination of the above two, and satellite images will overlap with road and location information.
PositionType: the way the control is placed on the page. Options are relative and absolute.
Left: controls the position on the left side of the page.
Top: controls the position of the upper part of the page.
Width: controls the width.
Height: control height.
Example:
Map = new VE_MapControl(32.69,-1 17. 13, 12,' r', "absolute", 400,10,400,300.
A simple page with virtual earth map controls can be created as follows:
< html >
< head >
My virtual earth
< script src = " map control . js " >
var map = null
Function OnPageLoad ()
{
Map = new VE_MapControl(32.69,-1 17. 13, 12,' r', "absolute", 10, 100.
document . body . appendchild(map . element)；
map . onendcontinuouspan = function(e)
{
document.getElementById("info ")。 innerHTML =
Latitude ='+east longitude and latitude+
Longitude ='+E. Longitude+
，Zoom = '+e . Zoom level；
}
}
< body onLoad="OnPageLoad()" >
< div id = " info " style = " font-size: 10pt " >
The effect diagram is as follows. You can use some control functions:
Drag the entire map to refresh the display.
Use the mouse wheel to zoom.
Double-click a location to zoom in.
Receiving an event from a map control
When the map displayed on the control changes, the map control will trigger an event that provides information about the map.
The events you can get from the control are:
onstartcontinuousspan
onEndContinuousPan
onStartZoom
A room
onMouseClick
onMouseDown
onMouseUp
All event functions pass in one parameter. The event parameters in MapControl.js are defined as follows:
Function ve _ mapevent (srcmpcontrol, latitude, longitude, zoom level)
{
this . srcMapControl = srcMapControl；
This.latitude = latitude;
This.longitude = longitude;
this . zoom level = zoom level；
}
Latitude and longitude represent the center of the map. The zoom level provides the number of scales that can be scaled.
The first thing we see is the first event-the loading event. This event is triggered every time the map starts or stops loading or scrolling. The onStartContinousPan event is triggered when the map starts scrolling, and the onEndContinousPan event is triggered when the map control stops scrolling.
We can add some code to the simple page created in the previous step to handle the onEndContinuousPan event and display the central information of the current map.
The code is as follows:
< html >
< head >
My virtual earth
< script src = " map control . js " >
var map = null
Function OnPageLoad ()
{
Map = new VE_MapControl(32.69,-1 17. 13, 12,' r', "absolute", 10, 100.
document . body . appendchild(map . element)；
map . onendcontinuouspan = function(e)
{
document.getElementById("info ")。 InnerHTML =' latitude ='+e. latitude+
Longitude ='+E. Longitude+
，Zoom = '+e . Zoom level；
}
}
< body onLoad="OnPageLoad()" >
< div id = " info " style = " font-size: 10pt " >
We can accomplish the above functions by adding a function to handle the onEndZoom event:
< html >
< head >
My virtual earth
< script src = " map control . js " >
var map = null
Function OnPageLoad ()
{
Map = new VE_MapControl(32.69,-1 17. 13, 12,' r', "absolute", 10, 100.
document . body . appendchild(map . element)；
var updateInfo = function(e)
{
document.getElementById("info ")。 InnerHTML =' Latitude ='+E. Latitude+',Longitude ='+E. Longitude+
，Zoom = '+e . Zoom level；
}
map . onendcontinuouspan = update info；
map.onEndZoom = updateInfo
}
< body onLoad="OnPageLoad()" >
< div id = " info " style = " font-size: 10pt " >
The map shows the following:
Convert map style
We have mentioned above that there are three styles to choose from:
In the air: satellite images are displayed at high altitude.
R-road: shows the street map of the area;
H-hybrid: It shows the combination of the above two, and satellite images will overlap with road and location information.
When the map control is displayed, you can use the SetMapStyle function to change the map style:
Set the map style (map style)
This function sets the style through the mapStyle parameter, as mentioned above, using a, r or h.
We can allow users to change the map style by adding two check boxes:
< html >
< head >
My virtual earth
< script src = " map control . js " >
var map = null
Function OnPageLoad ()
{
Map = new VE_MapControl(32.69,-1 17. 13, 12,' r', "absolute", 10, 100.
document . body . appendchild(map . element)；
var updateInfo = function(e)
{
document.getElementById("info ")。 InnerHTML =' Latitude ='+E. Latitude+',Longitude ='+E. Longitude+
，Zoom = '+e . Zoom level；
}
map . onendcontinuouspan = update info；
map.onEndZoom = updateInfo
}
Function ChangeMapStyle ()
{
var Aerial = document . getelementbyid(" AerialStyleCheck ")；
var Vector = document . getelementbyid(" VectorStyleCheck ")；
var s = ' r
If (the antenna. Check the&& vector. Checked)
{
s = ' h
}
Otherwise, if (antenna. Check)
{
s = ' a
}
Map. SetMapStyle
}
< body onLoad="OnPageLoad()" >
< div id = " info " style = " font-size: 10pt " >
< div id = " map style " style = " POSITION:absolute； Left: 470pxTOP:60px ">
< input id = " VectorStyleCheck " type = " checkbox " onclick = " ChangeMapStyle()" checked = " checked " >
The style of ordinary young people
< input id = " AerialStyleCheck " type = " checkbox " onclick = " ChangeMapStyle()" >
Air style
The effect is as follows:
Add a pin to the map.
The ability to add pushpin markers allows us to point out special locations on map controls. The pushpin displays the information of the overlay on the map control. The prototype of the AddPushpin method is as follows:
AddPushpin(id，lat，lon，width，height，className，innerHtml)
Id: the identifier of the push pin. Each pushpin has a unique identification number on the map control.
Lat: Latitude of the location of the pushpin.
Lon: the longitude of the location of the thumbtack.
Width: the width of the push pin.
Height: The height of the push pin.
The width and height are used to calculate the offset of the push pin so that the push pin can be placed at the specified latitude and longitude.
Tip: If you want your right foot at the bottom of the pushpin to be at the specified latitude and longitude, you need to multiply these values by 2:
Classname: the name of the style class of the pushpin. Without this parameter, the pushpin will not be displayed. Styles can be described by CSS files or embedded code.
InnerHTML: the text displayed on the pushpin.
In the following example, the onMouseClick event is used to add a push pin to the click position when the user clicks it:
< html >
< head >
My virtual earth
< style type = " text/CSS " media = screen >
. pin
{
Width: 44px Height:17px;
Font family: Arial, sans serif;
Font thickness: bold; Font size: 8pt
Color: white; Overflow: hide;
Cursor: pointer; Text-Decoration: None;
Text alignment: centered; Background: # 0000FF
Border: 1px solid # FF0000
Z index: 5;
}
- >
< script src = " map control . js " >
var map = null
Function OnPageLoad ()
{
Map = new VE_MapControl(32.69,-1 17. 13, 12,' r', "absolute", 10, 100.
document . body . appendchild(map . element)；
var updateInfo = function(e)
{
document.getElementById("info ")。 InnerHTML =' Latitude ='+E. Latitude+',Longitude ='+E. Longitude+
，Zoom = '+e . Zoom level；
}
map . onendcontinuouspan = update info；
map.onEndZoom = updateInfo
map.onMouseClick = function(e)
{
Map. AddPushpin('pin', e.latitude, e.longitude, 88,34,' pin',' my pin');
}
}
Function ChangeMapStyle ()
{
var Aerial = document . getelementbyid(" AerialStyleCheck ")；
var Vector = document . getelementbyid(" VectorStyleCheck ")；
var s = ' r
If (the antenna. Check the&& vector. Checked)
{
s = ' h
}
Otherwise, if (antenna. Check)
{
s = ' a
}
Map. SetMapStyle
}
< body onLoad="OnPageLoad()" >
< div id = " info " style = " font-size: 10pt " >
< div id = " map style " style = " POSITION:absolute； Left: 470pxTOP:60px ">
< input id = " VectorStyleCheck " type = " checkbox " onclick = " ChangeMapStyle()" checked = " checked " >
The style of ordinary young people
< input id = " AerialStyleCheck " type = " checkbox " onclick = " ChangeMapStyle()" >
Air style
This will lead to some problems:
Every time you drag the map, another push pin is added.
Double-clicking the map can enlarge it, because every time you receive a double-click event, you will add a push pin first.
Multiple pushpins can be added to an identifier.
One solution is to handle the onMouseClick event specially, and we can remove the previous pushpin every time we add it.
Use the Remove Pushpin function to remove pushpins:
remove pushpin(id)；
This function deletes the pin by passing in the id identifier.
Removing one pushpin will also remove all pushpins with the same identifier.
You can modify the above code to delete all previous pushpins:
map.onMouseClick = function(e){
Map. remove pushpin(' pin ')；
Map. AddPushpin('pin', e.latitude, e.longitude, 88,34,' pin',' my pin');
}
So there is only one pushpin to indicate the location of the last click:
Add navigation controls
Map controls have some inherent navigation functions, but sometimes it is necessary to provide some extra controls on the web page to allow users to control the navigation of the map. Here's how to add buttons to a web page to control the display of a map.
load
Let's first add buttons for the movement of the map. You can add some simple HTML code to the Body element of HTML:
< input type = " button " value = " Pan Up " onclick = " DoPanUp()" style = " position:absolute； Left: 60px Top: 600px "/>
< input type = " button " value = " Pan Left " onclick = " DoPanLeft()" style = " position:absolute； Left:10px; Top: 630px "/>
< input type = " button " value = " Pan Right " onclick = " dopan Right()" style = " position:absolute； Left:100px; Top: 630px "/>
< input type = " button " value = " Pan Down " onclick = " do pandown()" style = " position:absolute； Left: 45pxtop: 660px; ”/>
Add the following script fragment to handle the event of clicking the button. Use the panorama method. It can accept two parameters, x and y. They indicate how many positions can be moved in the x and y directions.
Function DoPanUp ()
{
Map. PanMap(0，- 100)；
}
Function DoPanDown ()
{
Map. PanMap(0， 100)；
}
Function DoPanLeft ()
{
Map. PanMap(- 100，0)；
}
Function DoPanRight ()
{
Map. PanMap( 100，0)；
}
If you browse in the browser and click the button, you will find that the map jumps again and again. This kind of user experience is not good. It is best to let the map scroll slowly and smoothly in all directions. You can use the ContinuousPan function to control it. In addition to x and y, it accepts a parameter that specifies the number of smooth scrolls. This can specify multiple movements to provide a smooth scrolling effect of the map.
Function DoPanUp ()
{
Map. continuous span(0，- 10，20)；
}
Function DoPanDown ()
{
Map. continuous span(0， 10，20)；
}
Function DoPanLeft ()
{
Map. continuous span(- 10，0，20)；
}
Function DoPanRight ()
{
Map. continuous span( 10，0，20)；
}
hum
Add the following two buttons for zooming:
< input type = " button " value = " Zoom In " onclick = " DoZoomIn()" style = " position:absolute； Left: 250px Top: 630px "/>
< input type = " button " value = " Zoom Out " onclick = " DoZoomOut()" style = " position:absolute； Left: 340px Top: 630px "/>
The following code implements the ZoomIn and ZoomOut functions, and each function increases or decreases the zoom ratio by 1.
Function DoZoomIn() {map. ZoomIn()； } function DoZoomOut() {map. zoo mout()； }
If you program according to the above, your page is basically similar to the picture at the beginning of the article. The complete code is as follows:
< html >
< head >
My virtual earth
< style type = " text/CSS " media = screen >
. pin
{
Width: 44px Height:17px;
Font family: Arial, sans serif;
Font thickness: bold; Font size: 8pt
Color: white; Overflow: hide;
Cursor: pointer; Text-Decoration: None;
Text alignment: centered; Background: # 0000FF
Border: 1px solid # FF0000
Z index: 5;
}
- >
< script src = " map control . js " >
var map = null
Function OnPageLoad ()
{
Map = new VE_MapControl(32.69,-1 17. 13, 12,' r', "absolute", 10, 100.
document . body . appendchild(map . element)；
var updateInfo = function(e)
{
document.getElementById("info ")。 innerHTML =
Latitude ='+east longitude and latitude+
Longitude ='+E. Longitude+
，Zoom = '+e . Zoom level；
}
map . onendcontinuouspan = update info；
map.onEndZoom = updateInfo
map.onMouseClick = function(e)
{
Map. remove pushpin(' pin ')；
Map. AddPushpin('pin', e.latitude, e.longitude, 88,34,' pin',' my pin');
}
}
Function ChangeMapStyle ()
{
var Aerial = document . getelementbyid(" AerialStyleCheck ")；
var Vector = document . getelementbyid(" VectorStyleCheck ")；
var s = ' r
If (the antenna. Check the&& vector. Checked)
{
s = ' h
}
Otherwise, if (antenna. Check)
{
s = ' a
}
Map. SetMapStyle
}
Function DoPanUp() {map. continuous span(0，- 10，20)； }
Function DoPanDown() {map. continuous span(0， 10，20)； }
Function DoPanLeft() {map. continuous span(- 10，0，20)； }
Function DoPanRight() {map. continuous span( 10，0，20)； }
Function DoZoomIn() {map. ZoomIn()； }
Function DoZoomOut() {map. zoo mout()； }
< body onLoad="OnPageLoad()" >
< div id = " info " style = " font-size: 10pt " >
< div id = " map style " style = " POSITION:absolute； Left: 470pxTOP:60px ">
< input id = " VectorStyleCheck " type = " checkbox " onclick = " ChangeMapStyle()" checked = " checked " >
The style of ordinary young people
< input id = " AerialStyleCheck " type = " checkbox " onclick = " ChangeMapStyle()" >
Air style
< input type = " button " value = " Pan Up " onclick = " DoPanUp()" style = " position:absolute； Left: 60px Top: 600px "/>
< input type = " button " value = " Pan Left " onclick = " DoPanLeft()" style = " position:absolute； Left:10px; Top: 630px "/>
< input type = " button " value = " Pan Right " onclick = " dopan Right()" style = " position:absolute； Left:100px; Top: 630px "/>
< input type = " button " value = " Pan Down " onclick = " do pandown()" style = " position:absolute； Left: 45pxtop: 660px; ”/>
< input type = " button " value = " Zoom In " onclick = " DoZoomIn()" style = " position:absolute； Left: 250px Top: 630px "/>
< input type = " button " value = " Zoom Out " onclick = " DoZoomOut()" style = " position:absolute； Left: 340px Top: 630px "/>
Set scripts for other controls.
At the beginning of this article, I mentioned that we can find the virtual earth map control we need from the /js/MapControl.js page. Here we need another script file containing other controls, which can be downloaded from/js/ve.js.
Similarly, if you need to use this script on your own site, you must copy this script file to your own site. If you use this script directly from the VirtualEarth site, users will receive a security warning, or they may not see this control at all.
You must introduce this script:
< script src = "/viavirtualeearth/Portals/0/ve . js " >
It should be noted here that other widgets assume that the map control on the page is a named map.
Compass control
The first thing we need to add is compass control. It provides various ways to roam on the map. Use an image to represent it, and finally use a transparent gif image to prevent it from covering the required map. You can create or use the pictures in this example yourself.
In the OnPageLoad method, you can create and place a Compass control by creating the document element VE_compass and setting its element properties.
The best way is to use it as a method alone and call it from the OnPageLoad method.
Function CreateCompass ()
{
var El = document . createelement(" div ")；
el.id = " VE _ Compass
El . style . background = " URL(images/compass . gif)"；
el.onmousedown=VE_Compass。 _ MouseDown
el.onmouseup=VE_Compass。 _ MouseUp
el.onmousemove=VE_Compass。 _ MouseMove
El . style . position = " absolute "；
El . style . top = 100；
El . style . left = 15；
El . style . zindex = 3 1；
El . style . width = 93；
El . style . height = 9 1；
VE _ Compass.element = el
document . body . appendchild(El)；
}
Function onpageload () {createcompass (); ...
The page will display a compass in the upper left corner of the map, and you can use it to navigate the whole map.
Map scale component
The map scale component provides the function of adjusting the display scale of the map, which is very useful when estimating the distance. Components are represented by a table with two rows. The names of tables and rows must be correctly defined in the code, and codes in other VE.js files can use these names to update the scale when the map changes.
First, add a table to the HTML:
< table id = " VE _ map scale " cell padding = " 0 " cellspacing = " 0 " unselect = " on " >
< tr >
< td >
< div id = " VE _ mapscale label " unselect = " on " >
< tr >
< td >
< div id = " VE _ MapScaleBar " unselect = " on " >
Then add some styles to define the display of the final scale:
# VE _ map scale
{
Location: absolute;
Width:150px;
Height:18px;
Fill: 0;
Margin: 0;
Z index: 31;
}
#VE_MapScaleLabel
{
Height: 22px
Font series: Verdana
font-size: 12pt；
Color: black;
Overflow: hide;
}
# VE _ map scale
{
Width:150px;
Height: 5px
Background: green;
Overflow: hide;
}
Add the following code to the OnPageLoad method to place the scale on the map and display the initial scale:
position element(document . getelementbyid(" VE _ map scale ")，300，550， 150， 18)；
UpdateMapScale()；
Finally, you need to update the scale every time you zoom. In the OnPageLoad function, we added code to handle this event. We need to add a call to update the scale.
map . onendzoom = function(e){ document . getelementbyid(" info ")。 InnerHTML =' latitude ='+E. latitude+',longitude ='+E. longitude+'), zoom ='+E. zoom level; UpdateMapScale()； }
Zoom control
The zoom control provides a flexible user interface to control the zoom of the map. It also provides visual feedback to provide the zoom scale and current scale information of the map.
First, we need to add some style sheets to describe the appearance of the control, which mainly includes four parts: the main bar, the slider, the zoom-out control on the left and the zoom-in control on the right. Each widget needs a picture file to define how to display these controls.
I created a simple picture here, and you can copy it. The zoom style definition should be similar to the following:
. Virtual reality control reduction
{
Location: absolute;
Width: 26px
Height: 32px
Background: URL (images/zoomout.gif);
Display: embedded;
Text alignment: centered;
Text-Decoration: None;
Color: black;
}
. Virtual reality control
{
Location: absolute;
Width: 26px
Height: 32px
Background: URL (images/zoomin.gif);
Display: embedded;
Text alignment: centered;
Text-Decoration: None;
Color: black;
}
. VE_ZoomControl_bar
{
Location: absolute;
Width:128px;
Height: 32px
Background: URL (images/zoombar.gif);
Display: embedded;
}
. Virtual zoom control slider
{
Location: absolute;
Width: 8px
Height: 24px
Background: URL (images/zoomslider.gif);
Overflow: hide;
Display: embedded;
}
The code for creating zoom controls can be placed at the end of the OnPageLoad function, so that these controls can be initialized when the page is called.
var zm=VE_ZoomControl。 Create (5,550,9, "absolute");
document . body . appendchild(zm)；
In order to make the zoom control reflect the current zoom ratio, we need to adjust it every time we zoom. Therefore, a refresh control is added at the end of the onEndZoom function:
map.onEndZoom=function(e)
{
document.getElementById("info ")。 InnerHTML =' latitude ='+E. latitude+',longitude ='+E. longitude+'), zoom ='+E. zoom level; UpdateMapScale()；
VE_ZoomControl。 SetZoomLevel (map. GetZoomLevel())；
}
Let's see what our current page looks like. It adds three major components, as follows:
Add comments
Like other controls, we need to define the style of the note first. We use the same style as the virtual earth website:
. Virtual panel
{
Overflow: hide;
Z index: 31;
Border: 1px solid # cbcbcb
Fill: 0;
Margin: 0;
Background: white;
}
. VE _ panel _ title
{
Location: Absolute