The points obtained by Baidu map search control are inaccurate

1. Problem explanation

When we use Baidu 2D map, add its search control

<bm-control>
   <bm-auto-complete v-model="workAddress" :sugStyle="{ zIndex: 999999 }" @confirm="handleConfirm">
      <el-input v-model="workAddress" placeholder="请输入地址来直接查找相关位置" style="width:500px"></el-input>
    </bm-auto-complete>
</bm-control>

When we search for a location, then punctuate the center point (Baidu Map returns the point)

code show as below

handleConfirm({ item }) {
  const that = this;
  let queryString = `${item.value.city}${item.value.district}${item.value.business}`;
  var myGeo = new BMap.Geocoder();
  myGeo.getPoint(queryString, function (point) {
    if (point) {
      that.from.position.lng = point.lng;
      that.from.position.lat = point.lat;
      that.centerMap.lat = point.lat // 改变中心点位的坐标
      that.centerMap.lng = point.lng;
      let initFrom = {
        path: [{ lng: that.centerMap.lng - 0.003468, lat: that.centerMap.lat + 0.002692 }, { lng: that.centerMap.lng - 0.006234, lat: that.centerMap.lat - 0.003139 }, {
          lng: that.centerMap.lng + 0.001359,
          lat: that.centerMap.lat + 0.000199
        }],
        gridName: "",
        position: point,
        backgroundColor: "#409EFF",
        editing: true,
        borderColor: "blue",
        startTime: "",
        endTime: "",
        status: "1",
      };
      that.polygonPaths = []
      that.from.path = initFrom.path
      that.polygonPaths.push(initFrom);
      that.polygonPaths[0].editing = true;
      that.polygonPaths[0].borderColor = "blue";
      that.polygonPaths[0].animation = "BMAP_ANIMATION_BOUNCE";
    }
  });
},

For example, if we search for a subway station

The point position and the marked position are obviously different. At first I thought there was something wrong with the point mark, so I printed a search here to return the point coordinates.

lat is 30.603496083497404

lng is 114.3097383216564

Then we create a new html file to test it

The test code is as follows

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=GD29POLDi2rlnSvAEaVpzLfsHHftl4kD"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
            height: 100vh;
            width: 100%;
        }
 
        #maps {
            width: 100%;
            height: 100%;
            margin: 0 auto;
        }
    </style>
</head>
 
<body>
    <div id="maps"></div>
    <script>
        // 创建地图实例
        let map = new BMap.Map('maps')
        // 设置中心点坐标
        let centerPoint = new BMap.Point(114.3097383216564 , 30.603496083497404)
        // 初始化地图  同时设置地图展示级别
        map.centerAndZoom(centerPoint, 13)
        // 开启滚轮缩放
        map.enableScrollWheelZoom(true);
        // 将标注添加到地图上  
        map.addOverlay(marker);  
    </script>
</body>
 
</html>

Just put the point just now on the map and see if it is a punctuation problem.

As a result, there was no problem with the point. I knew that there was something wrong with the point returned by the search.

2. Solution

I changed to local search here ( local search )

code show as below

handleConfirm({ item }) {
  const that = this;
  let queryString = `${item.value.city}${item.value.district}${item.value.business}`;

  function myFun() {
    var point = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
    console.log('经度：' + point.lng, '纬度：' + point.lat);
    // 处理逻辑
  }
  var local = new BMap.LocalSearch(this.map, { //智能搜索
    onSearchComplete: myFun
  });
  local.search(queryString)
},

test

Solve Submit the code and start fishing