Use the Baidu Map API to find your location in the browser

Source: Internet
Author: User

First you have to have a secret key to the Baidu map, Http://lbsyun.baidu.com/apiconsole/key.

The rest is coded.

This will use a JavaScript function, getmylocation (), using it we can get their latitude and longitude, and then go through the Baidu map, show it.

The code above, first the code in the HTML file, using the HTML5 standard

<!DOCTYPE HTML><HTML><Head>    <Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" />    <Metaname= "Viewport"content= "initial-scale=1.0, User-scalable=no" />    <styletype= "Text/css">body, HTML, #allmap{width:100%;Height:100%;Overflow:Hidden;margin:0;font-family:"Microsoft Jas Black";}    </style>    <Scripttype= "Text/javascript"src= "Http://api.map.baidu.com/api?v=2.0&ak=WkiwWUQooPfVD2lgLGV8sv3x"></Script>    <title>Get my location</title>     <Scripttype= "Text/javascript"src= "Text.js">    </Script></Head><Body>    <DivID= "Allmap"></Div></Body></HTML>

Then the code in JS

functionMap (position) {//Baidu Map API features    varMap =NewBmap.map ("Allmap");//Create a Map instancealert (position.coords.longitude);    alert (position.coords.latitude); Map.centerandzoom (NewBmap.point (Position.coords.longitude, Position.coords.latitude), 15);//Initialize the map, set the center point coordinates and the map level the larger the magnification, the greater the number ofMap.addcontrol (NewBmap.maptypecontrol ());//Add a Map type controlMap.setcurrentcity ("my position");//set the city that the map displays this item is required to be setMap.enablescrollwheelzoom (true);//Turn on mouse wheel zoom}window.onload=getmylocation;//without it, the page won't show the map .functiongetmylocation () {if(navigator.geolocation) {navigator.geolocation.getCurrentPosition (map); }    Else{alert ("Sorry, failed to get your address information"); }}

When the program runs, the browser will prompt you to run to get your address information, and here you choose to run.

One thing to be aware of is window.onload=getmylocation; Without it, the page won't show the map.

This means that after you have finished loading the HTML and then execute the function, and it seems to point to the getmylocation, not to the map function, specifically why I am not clear, or I have not learned there, but I understand that The map function runs on getmylocation and vice versa, so it points to the Getmylocation function.

Run:

Use the Baidu Map API to find your location in the browser

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.