The method for calling this interface is different from that for calling a custom interface. The reason is that for the sake of browser security, cross-origin Ajax call is generally prohibited, so gdownloadurl () cannot get data on the http://maps.live.com. The solution to this problem is to dynamically Add a script in the DOM of the webpage. The specific method is to add the following code to the onload event function loaded on the webpage.
// Dynamically create a DOM Node
VaR Ss = Document. createelement ("script ");
// Set the script's SRC
SS. src = "http://maps.live.com/WiFiIPService/locate.ashx ";
// Set the Script Type
SS. type = "text/JavaScript ";
// Append the script to the DOM of the webpage
// Except for the appendchild element of document.doc umentelement
// You can also add a new node to the document. Body or other DOM elements.
Document.doc umentelement. appendchild (SS );
The following code is used in this example (blogmap.html ):
<! --This is the complete blogmap.html code -->
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 strict // en" "http://www.w3.org/TR/ xhtml1/DTD/xhtml1-strict.dtd">
<HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> Google Maps javascript API example </title>
<Style type = "text/CSS">
Body, HTML, # map {
Margin: 0px;
Width: 100%;
Height: 100%;
}
</Style>
<! -- Import the Google Maps API library file. Replace the API key in this Code with the API key obtained in the previous article -->
<SCRIPT src = "http://maps.google.com/maps? File = API & amp; V = 2 & amp; Key = abqiaaaa1j plain "type =" text/JavaScript "> </SCRIPT>
<SCRIPT type = "text/JavaScript">
// <! [CDATA [
VaR map; // global GMAP
// Used to initialize Google maps during webpage Loading
Function load ()
{
If (gbrowseriscompatible ())
{
// Create a gmap2 object
Map = new gmap2 (document. getelementbyid ("map "));
// The scaling level is relatively small. If not, you can set the appropriate level.
Map. setcenter (New glatlng (37.4419,-122.1419), 1 );
// Dynamically create a DOM Node
VaR Ss = Document. createelement ("script ");
// Set the script's SRC
SS. src = "http://maps.live.com/WiFiIPService/locate.ashx ";
// Set the Script Type
SS. type = "text/JavaScript ";
// Append the script to the DOM of the webpage
// Except for the appendchild element of document.doc umentelement
// You can also add a new node to the document. Body or other DOM elements.
Document.doc umentelement. appendchild (SS );
}
}
// Setautolocateviewport () interface, to the Current Visitor's location
// The first parameter latitude -- the latitude of the current IP Address
// The second parameter longpolling -- longitude of the current IP Address
// Zoomlevel, the third parameter -- the current zoomlevel suitable for Microsoft Virtual Earth display (useless for Google Maps API // programs)
// 4th parameter unknown -- this interface does not have the relevant information. It may indicate whether to enable the virtual 3D function of the Virtual Earth map (useless to the Google Maps API program)
// Message with 5th parameters -- display the message (useless to Google Maps APIs)
Function setautolocateviewport (latitude, longpolling, zoomlevel, unknown, message)
{
// Visitor Location
VaR point = new glatlng (latitude, longpolling );
// Create a custom gicon
VaR myicon = new gicon ();
Myicon. Image = "http://labs.google.com/ridefinder/images/mm_20_green.png ";
Myicon. Shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png ";
Myicon. iconsize = new gsize (12, 20 );
Myicon. shadowsize = new gsize (22, 20 );
Myicon. iconanchor = new gpoint (6, 20 );
Myicon. infographic wanchor = new gpoint (5, 1 );
// Mark the visitor's location
VaR marker = new gmarker (point, // create a custom gmarker
{Icon: myicon,
Title: "Green marked as your current location "});
Map. addoverlay (Marker );
// Move to the Current Visitor's location
Map. Panto (point );
}
// Showmessage () Interface
Function showmessage ()
{
Alert ("You cannot provide your location for the moment. Please try again later! ");
}
// Autolocateundetectable () Interface
Function autolocateundetectable ()
{
Alert ("your location cannot be detected for the moment. Please try again later! ");
}
//]>
</SCRIPT>
</Head>
<! -- Call the load () function to load the map during loading. Add onUnload = "gunload ()" to prevent memory leakage. -->
<Body onload = "load ()" onUnload = "gunload ()">
<! --
The following Div element with the ID of map is the container of Google map.
Because the width and height of the layer have been defined in CSS as 100%, you do not need to define them again.
-->
<Div id = "map"> </div>
</Body>
</Html>
The display effect is 4.1.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
