HTML5 positioning gets the current location and displays it on Baidu map

Home

Web Front-end

H5 Tutorial

HTML5 positioning gets the current location and displays it on Baidu map_html5 tutorial skills

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:47 PM

html5positionBaidu map

When developing a mobile web or webapp, when using the Baidu Map API, it is often necessary to obtain the current location through mobile phone positioning and display it in the center on the map. This requires the use of the geolocation function of HTML5.

Copy code

The code is as follows:

navigator.geolocation.getCurrentPosition(callback);

After successfully obtaining the coordinates, the callback function callback will be executed; the parameter of the callback method is the obtained coordinate point; then you can initialize the map, set the control, center point, zoom level, and then add points to the map Overlay:

Copy code

The code is as follows:

var map = new BMap. Map("mapDiv");//mapDiv is the id of the div where the map is placed
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.ScaleControl());
map.addControl(new BMap.OverviewMapControl());
map.centerAndZoom(point, 15); //point is the coordinate point, 15 is the map zoom level, and the maximum level is 18
var pointMarker = new BMap. Marker(point);
map.addOverlay(pointMarker);

However, in fact, this is not enough, and the displayed results are not accurate. This is because the coordinates obtained by getCurrentPosition are GPS longitude and latitude Coordinates, and the coordinates of Baidu Map are specially converted. Therefore, a step of coordinate conversion is required between obtaining the positioning coordinates and initializing the map. This conversion method has been provided in Baidu API, and the method of converting a point or batch conversion is Both are provided: single point conversion needs to refer to http://developer.baidu.com/map/jsdemo/demo/convertor.js, batch conversion needs to refer to http://developer.baidu.com/map/jsdemo/demo/changeMore .js, only the former is needed here:

Copy the code

The code is as follows:

BMap.Convertor.translate(gpsPoint, 0, callback);
//gpsPoint: coordinates before conversion, the second parameter is the conversion method, 0 means the gps coordinates are converted to Baidu coordinates, callback function, the parameter is the new coordinates Click

The detailed code of the example is as follows: (ak in the reference is the application key)

Copy code

The code is as follows:

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

How to fix KB5055523 fails to install in Windows 11?

4 weeks agoByDDD

How to fix KB5055518 fails to install in Windows 10?

4 weeks agoByDDD

Roblox: Grow A Garden - Complete Mutation Guide

3 weeks agoByDDD

Roblox: Bubble Gum Simulator Infinity - How To Get And Use Royal Keys

3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

How to fix KB5055612 fails to install in Windows 10?

3 weeks agoByDDD

Hot Tools

MantisBT

Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.

Atom editor mac version download

The most popular open source editor

MinGW - Minimalist GNU for Windows

This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.