当前位置：网站首页>Call Baidu map to display the current position

Call Baidu map to display the current position

2022-07-04 08:14:00 【Xiao Xia Mu】

  1. Get Baidu key
    Insert picture description here
    Be careful ：JavaScript API Only browser type ak, Please apply at ak Pay attention to choose .
    Insert picture description here
    Apply for Baidu key link ：http://lbsyun.baidu.com/apiconsole/key?application=key

  2. Implementation code ：

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
        <title>Geolocation</title>
        <style type="text/css"> html {
       height: 100% } body {
       height: 100%; margin: 0px; padding: 0px; } #container {
       width: 70%; height: 100%; margin: 20px auto; } </style>
    </head>

    <body>
        <div id="container"></div>
        <!-- Load Baidu  map api-->
        <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak= Your key "></script>  
    
        <script> // Check whether the browser supports positioning API if (navigator.geolocation) {
       // getCurrentPosition Method to get the coordinate value of the current position  navigator.geolocation.getCurrentPosition(function(position) {
       var latitude = position.coords.latitude; //  latitude  var longitude = position.coords.longitude; //  longitude  console.log(" longitude ：" + longitude + " latitude ：" + latitude); // container Indicates which container to inject  var map = new BMap.Map("container"); //  Pass the longitude and latitude to Baidu  var point = new BMap.Point(longitude, latitude); /// Initialize map , Set center point coordinates and map level  map.centerAndZoom(point, 15); // Coordinate transformation  var convertor = new BMap.Convertor(); var pointArr = []; pointArr.push(point); convertor.translate(pointArr, 1, 5, translateCallback); // Callback function after coordinate conversion  function translateCallback(data) {
       if (data.status === 0) {
       //  Create annotations  var marker = new BMap.Marker(data.points[0] map.addOverlay(marker); map.setCenter(data.points[0]); } } }, function(error) {
       console.log(error.code) }) } </script>
    </body>
</html>

According to the effect ：

3. At present, there are mainly three coordinate systems in China ：

  • WGS84： For a geodetic coordinate system , It is also widely used at present GPS The coordinate system used by GPS .
  • GCJ02： Also known as the Mars coordinate system , It is the coordinate system of geographic information system developed by China National Bureau of Surveying and mapping . from WGS84 The encrypted coordinate system .
  • BD09： For Baidu coordinate system , stay GCJ02 The coordinate system is encrypted again . among bd09ll Represents Baidu latitude and longitude coordinates ,bd09mc Represents Baidu Mercator metric coordinates . Map of non China area , Unified use of service coordinates WGS84 coordinate .

Baidu external interface coordinate system is BD09 Coordinate system , Not at all GPS The true latitude and longitude of the acquisition , Using Baidu map JavaScript API Before service , Need to convert non Baidu coordinates into Baidu coordinates through coordinate conversion interface first .
Insert picture description here

Welcome to read , I have limited experience , There are some mistakes or omissions in the blog writing , I hope you can give me some advice , Thank you so much . Article in continuous update …

原网站

版权声明
本文为[Xiao Xia Mu]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/02/202202141504305078.html

边栏推荐

猜你喜欢

随机推荐