HTML5 by acquiring geographical latitude and longitude, judge the city

Source: Internet
Author: User

HTML5 provides access to the geographical location of the API, it is convenient to determine the latitude and longitude of customers, we have access to latitude and longitude, you can provide the API through the Baidu map to determine the location of the user.

<! DOCTYPE html>
<meta charset= "Utf-8"/>
<title> browser-based HTML5 Find Locations </title>
<!--Baidu API-->
<script src= "" type= "Text/javascript" ></script>

function GetLocation () {
var options={
if (navigator.geolocation) {
Browser support geolocation
Navigator.geolocation.getCurrentPosition (onsuccess,onerror,options);
Browser does not support geolocation
Alert (' Your browser does not support geographic positioning ');

            function onsuccess (position) {
               //Back to User location
               var longitude =position.coords.longitude;
                var latitude = position.coords.latitude;

Alert (' Longitude ' +longitude+ ', Latitude ' +latitude);

According to latitude and longitude to obtain geographical location, not too accurate, access to urban areas is still possible
var map = new ("Allmap");
var point = new Bmap.point (longitude,latitude);
var gc = new Bmap.geocoder ();
Gc.getlocation (Point, Function (RS) {
var addcomp = rs.addresscomponents;
Alert (addcomp.province + "," + + "," + Addcomp.district + "," + Addcomp.street + "," + addcomp.streetnumb ER);


            function OnError (error) {
                switch (error.code) {
                    Case 1:
                    Alert ("Location service denied");

Case 2:
Alert ("Temporary access to location information");

Case 3:
Alert ("Get information timed out");

Case 4:
Alert ("Unknown error");




At present, the computer is sometimes not available, the phone is still very good, in addition, to obtain the location is not very accurate, but used to obtain urban areas can be.

In fact, this is called the Baidu map +HTML5 to achieve, very good.

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