Introduction to html5 geographic location information, used by Baidu map

1. Geographic Information API in HTML5

HTML5's Geolocation API allows you to obtain the user's geographic location information and use it in many different application scenarios, such as:

• Display the user's location and surrounding POIs (points of interest) on a map
• Provide positioning services and navigation services based on the user's location
• Provide information about nearby businesses and services based on the user's location

HTML5's Geolocation API uses a variety of technologies to determine a user's location, including GPS, Wi-Fi hotspots, cellular data, and more. When using the Geolocation API, users are required to authorize access to their location information.

1.1 Geolocation interface

GeolocationAn interface is a 设备地理位置programmatic fetcher 对象that allows web content 访问to be 设备accessed 地理位置, which allows web applications to provide customized information based on the user's geographic location. Let's be honest: In fact, objects with this interface can be obtained Geolocation 就是用来获取到当前设备的经纬度（位置）
using properties implemented by Navigator .NavigatorGeolocation.geolocation

Note : For security reasons, when a web page tries to obtain geolocation information, it will be requested 用户批准地理位置访问权限. Be aware that each browser has its own policy and method of requesting user approval for this permission.

Here's an example of an HTML5 geolocation API:

navigator.geolocation.getCurrentPosition(function(position) {
    
    
  console.log(position);
});

2. Use Baidu map in vue

To use Baidu Maps in Vue, you can use third-party libraries vue-baidu-map. This library provides a set of Vue components that can easily use the functions of Baidu Maps in Vue applications.

Here is an example of displaying a map vue-baidu-mapin :

1. First, install vue-baidu-map:

npm install vue-baidu-map --save

2. In the component that needs to use the map, import vue-baidu-map:

import BaiduMap from 'vue-baidu-map';

3. Register BaiduMapthe component :

export default {
    
    
  components: {
    
    
    'baidu-map': BaiduMap
  }
}

4. Use baidu-mapthe component to display the map:

<template>
  <div>
    <baidu-map :ak="'你的百度地图AK'" :center="{lng: 116.404, lat: 39.915}" :zoom="14" style="height: 600px">
      <bm-marker :position="{lng: 116.404, lat: 39.915}" :icon="markerIcon"></bm-marker>
    </baidu-map>
  </div>
</template>

In this example, we use baidu-mapthe component to display the map, and bm-markerthe component to display a marker on the map. :akThe attribute specifies your Baidu map AK, :centerthe attribute specifies the coordinates of the center point of the map, :zoomthe attribute specifies the zoom level of the map, and :stylethe attribute specifies the style of the map. :positionThe attribute specifies the position of the marker, and :iconthe attribute specifies the icon of the marker.

3. Use Baidu map in react

To use Baidu Maps in React, you can use third-party libraries react-baidu-maps. This library provides a set of React components that can easily use the functions of Baidu Maps in React applications. The following is a sample code for using Baidu Maps in React:

1. Install react-baidu-mapsdependencies :

npm install --save react-baidu-maps

2. Introduce Mapand Marker:

import React from 'react';
import {
    
     Map, Marker } from 'react-baidu-maps';

class MyComponent extends React.Component {
    
    
  render() {
    
    
    return (
      <Map
        ak="你的百度地图AK"
        center={
    
    {
    
     lng: 116.404, lat: 39.915 }}
        zoom="11"
        style={
    
    {
    
     height: '500px' }}
      >
        <Marker position={
    
    {
    
     lng: 116.404, lat: 39.915 }} />
      </Map>
    );
  }
}

In the above code, we use Mapthe component to display the map, and nest a Markercomponent inside it to display the markers. akThe attribute specifies your Baidu map AK, centerthe attribute specifies the coordinates of the center point of the map, zoomthe attribute specifies the zoom level of the map, and stylethe attribute specifies the style of the map. positionThe attribute specifies the position of the marker.

Please note that in order to protect your AK, it is not recommended to write the AK directly in the code. A better approach is to store the AK in an environment variable, and then refer to this environment variable in the code. This avoids leaking the AK into a public code repository. If you use Create React App to create React applications, you can use .envfiles to store environment variables. For specific usage methods, please refer to the documentation of Create React App.