Call Google map to display the corresponding location based on the longitude and latitude

Last Update:2018-12-07 Source: Internet

Author: User

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Train of Thought: Assign the parameter value to the parameter value in the latlon.htm file. Example:

Solution 1:

1、has two pages (default.aspxand latlon.htm)

2. Project:

3. Default PageCode:

<% @ Page Language = "C #" autoeventwireup = "true" codebehind = "default. aspx. cs" inherits = "map editing. _ default" %>

<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Function showmap (){

VaR long = Document. getelementbyid ("long"). value;

VaR lat = Document. getelementbyid ("Lat"). value;

VaR Company = Document. getelementbyid ("company"). value;

VaR zoomlevel = 10;

If (long = "" | lat = ""){

Long = 113.2759952545166;

Lat = 23.117055306224895;

Company = "Guangzhou ";

}

VaR OBJ = new object ();

OBJ. LAT = Lat; // latitude

OBJ. lng = long; // longitude

OBJ. Zoom = zoomlevel ;//Zoom level

OBJ. Ent = company;

OBJ. sdpno = company;

OBJ. ADDR = "Guangdong ";

VaR retval = Window. showmodaldialog (

'Latlon.htm? _ = '+ Math. Random ()

, OBJ, 'dialogwidth: 800px; dialogheight: pixel PX ;'

);

}

</SCRIPT>

</Head>

<Body>

<Div>

<Label Title = "company name"> Company Name: </label>

<Label Title = "longitude"> longitude: </label>

<Label Title = "latitude"> latitude: </label>

</Div>

</Form>

</Body>

</Html>

4、latlon.htm Page code:

<HTML>

<Title> latitude and longitude Editor </title>

VaR map;

Function sethms (f ){

// Degree

VaR H = parseint (f );

// Minute

VaR M = parseint (parsefloat (f)-parseint (H) * 60 );

// Second

VaR S = parseint (parsefloat (f)-parseint (H) * 60-parseint (M) * 60 );

If (M. tostring (). Length = 1 ){

M = '0' + M. tostring ();

}

If (S. tostring (). Length = 1 ){

S = '0' + S. tostring ();

}

VaR HMS = H + degree + M + minute + S + second ';

Return HMs;

}

Function initialize (){

VaR OBJ = Window. dialogarguments;

VaR lat = obj. Lat;

VaR lng = obj. lng;

VaR zoom = parseint (obj. Zoom );

VaR ent = obj. ent;

VaR sdpno = obj. sdpno;

VaR ADDR = obj. ADDR;

VaR latlng = new Google. Maps. latlng (Lat, LNG );

VaR myoptions = {

// The parameters here can be multiple parameters. For details, refer to the mapoptions object.

Zoom: Zoom,

Center: latlng,

Maptypeid: Google. Maps. maptypeid. Roadmap

};

Map = new Google. Maps. Map (document. getelementbyid ('map _ canvas '),

Myoptions );

VaR marker = new Google. Maps. Marker ({

// You can specify multiple parameters. For more information, see the markeroptions object.

Map: map,

Position: latlng,

Draggable: True

});

Google. Maps. event. addlistener (Marker, 'click', function (event ){

// Here, the infowindow parameter can be multiple objects. For details, refer to the infowindowoptions object.

VaR html = '<Div style = "line-Height: 20px;"> ';

HTML + = '<div> <font color = "blue">' + ent + '</font> </div> ';

// Html + = '<div> <font color = "gray" size = "1"> license No.:' + sdpno + '</font> </div> ';

// Html + = '<div> <font color = "gray" size = "1"> address:' + ADDR + '</font> </div> ';

HTML + = '<div> <font color = "red" size = "1"> longitude:' + sethms (event. latlng. LNG () + 'latitude: '+ sethms (event. latlng. LAT () + '</font> </div>'; HTML + = '</div> ';

VaR infowindow = new Google. Maps. infowindow ({content: HTML });

Infowindow. Open (MAP, marker );

});

Document. getelementbyid ("divload"). style. Display = "NONE ";

Document. getelementbyid ("map_canvas"). style. Display = "";

}

Function loadscript (){

VaR script = Document. createelement ("script ");

Script. type = "text/JavaScript ";

Script. src = "http://maps.google.com/maps/api/js? Sensor = false & callback = initialize ";

Document. Body. appendchild (SCRIPT );

}

Window. onload = loadscript;

</SCRIPT>

</Head>

<Body>

<Div id = "divload" style = "position: absolute; top: pixel PX; left: 360px; font-size: 11px;

Color: Gray; font-weight: bold; ">

Initialize... </div>

</Div>

</Body>

</Html>

5. Results:

Solution 2:

Here is the code. This is a simple function and I hope it will help you.

<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<Head>

<Title> longitude and latitude </title>

HTML {Height: 100% ;}

Body {Height: 100%; margin: 0px; padding: 0px ;}

. Search {margin: 50px auto; width: 50% ;}

</Style>

// <! [Cadta [

VaR geocoder ;//

VaR map; // global GMAP

VaR infowindow = new Google. Maps. infowindow (); // create a ginfowindow object

VaR marker; // global gmarker

// ------------------- Initialize map ---------- start during webpage Loading

Function initialize ()

{

Geocoder = new Google. Maps. geocoder ();

VaR latlng = new Google. Maps. latlng (39.92, 116.46); // you can specify the longitude and latitude of the initial map center. Beijing is the center.

VaR myoptions = {

Zoom: 5, // set the map zoom level

Center: latlng,

Maptypeid: Google. Maps. maptypeid. Roadmap

}

Map = new Google. Maps. Map (document. getelementbyid ("map_canvas"), myoptions); // create a GMAP object

}

// ------------------- Map initialization during webpage loading ---------- end

Function codelatlng ()

{

VaR input = Document. getelementbyid ("latlng"). value; // obtain the value in text.

VaR latlngstr = input. Split (",", 2 );

VaR lat = parsefloat (latlngstr [0]); // obtain the longitude value

VaR lng = parsefloat (latlngstr [1]); // obtain the latitude value

VaR latlng = new Google. Maps. latlng (Lat, LNG );

// If (Marker)

//{

// Map. closeinfowindow ();

// Map. removeoverlay (Marker );

//}

Geocoder. geocode ({'latlng ': latlng}, function (results, status) // Address Resolution

{

If (status = Google. Maps. geocoderstatus. OK) // Google. Maps. geocoderstatus. OK indicates that the map is successfully parsed.

{

If (results [0]) // results [0] stores the address returned by the previous Query

{

Map. setzoom (15); // sets the zoom level of the map returned by the query.

Marker = new Google. Maps. Marker ({// create a marker landmark

Position: latlng,

Map: Map

});

// Set the content contained in the Information Window

Infowindow. setcontent ("<Div style = \" color: red; font-size: 14px \ ">"

+ "<Br/>"

+ "<Strong> address: </strong> & nbsp;" + results [0]. formatted_address + "<br/>"

+ "<HR width: 50px>"

+ "<Strong> longitude: </strong> & nbsp;" + lat + "<br/>"

+ "<HR width: 50px>"

+ "<Strong> latitude: </strong> & nbsp;" + LNG + "<br/>"

+ "<Br/> ");

Infowindow. Open (MAP, marker); // Display Information Window

}

Else

{

Alert ("no record ");

}

} Else

{

Alert ("geocoder failed due to:" + status );

}

});

}

//]>

</SCRIPT>

</Head>

<! -- Call the initialize () function to load a map when loading -->

Enter longitude and latitude: <input id = "latlng" type = "text" value = "30.87341, 120.12411 "/> <input type =" button "value =" Search "onclick =" codelatlng () "/>

</Div>

<! -- The DIV element with the ID of map below is the container of Google Map, and the map shows this -->

</Div>

</Body>

</Html>

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

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

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

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

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

Call Google map to display the corresponding location based on the longitude and latitude

Contact Us

What's Trending

Top 10 Tags

Top 10 Keywords

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support

Call Google map to display the corresponding location based on the longitude and latitude

Contact Us

What's Trending

Top 10 Tags

Top 10 Keywords

Trending Topic

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support