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
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
