VueBaiDuMap百度地图组件常用案例

VueBaiDuMap获取可视区边界点坐标_毛三仙的博客-CSDN博客【代码】VueBaiDuMap获取可视区边界点坐标。百度地图，左上角左下角右上角右下角坐标https://blog.csdn.net/m0_74149462/article/details/130420983?csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22130420983%22%2C%22source%22%3A%22m0_74149462%22%7D

VueBaiDuMap实现绘制自定义区域（即多边形）_毛三仙的博客-CSDN博客VueBaiDuMap实现绘制自定义区域，多边形（百度地图）https://blog.csdn.net/m0_74149462/article/details/130420530?spm=1001.2014.3001.5502

利用VueBaiDuMap实现打点 + 弹窗（el-dialog）_毛三仙的博客-CSDN博客【代码】利用VueBaiDuMap实现打点 + 弹窗（el-dialog）https://blog.csdn.net/m0_74149462/article/details/130402951?spm=1001.2014.3001.5502

vueBaiDuMap实现多边形回显https://blog.csdn.net/m0_74149462/article/details/130420789

完整示例代码

vueBaiDuMap/vueBaiDuMap.vue

vueBaiDuMap/areaPoints.json

{
  "code": 1,
  "message": "查询成功",
  "data": [
    [
      {
        "lng": 119.917344,
        "lat": 28.510226
      },
      {
        "lng": 119.868188,
        "lat": 28.43961
      },
      {
        "lng": 119.975123,
        "lat": 28.424363
      },
      {
        "lng": 119.99352,
        "lat": 28.497783
      },
      {
        "lng": 119.934591,
        "lat": 28.467557
      },
      {
        "lng": 119.954426,
        "lat": 28.51632
      }
    ],
    [
      {
        "lng": 120.024565,
        "lat": 28.513527
      },
      {
        "lng": 119.971961,
        "lat": 28.471114
      },
      {
        "lng": 120.014504,
        "lat": 28.413181
      },
      {
        "lng": 120.009618,
        "lat": 28.513019
      },
      {
        "lng": 120.055898,
        "lat": 28.454347
      }
    ]
  ]
}

vueBaiDuMap/drawAreaDialog.vue

vueBaiDuMap/drawPolylineDialog.vue

vueBaiDuMap/points.json

{
  "code": 1,
  "message": "查询成功",
  "data": [
    {
      "clusterId": 13,
      "pointCount": 0,
      "x": 119.94566899999997,
      "y": 28.47721500000003,
      "data": {
        "id": 13,
        "longitude": 119.945669,
        "latitude": 28.477215,
        "groupType": 7
      },
      "cluster": false
    },
    {
      "clusterId": 18,
      "pointCount": 0,
      "x": 119.93474500000004,
      "y": 28.441743000000002,
      "data": {
        "id": 18,
        "longitude": 119.934745,
        "latitude": 28.441743,
        "groupType": 7
      },
      "cluster": false
    },
    {
      "clusterId": 19,
      "pointCount": 0,
      "x": 119.97269,
      "y": 28.498137,
      "data": {
        "id": 19,
        "longitude": 119.97269,
        "latitude": 28.498137,
        "groupType": 7
      },
      "cluster": false
    },
    {
      "clusterId": 23,
      "pointCount": 0,
      "x": 119.96535900000003,
      "y": 28.463244000000017,
      "data": {
        "id": 23,
        "longitude": 119.965359,
        "latitude": 28.463244,
        "groupType": 8
      },
      "cluster": false
    },
    {
      "clusterId": 26,
      "pointCount": 2,
      "x": 119.93983495465487,
      "y": 28.468624388296718,
      "data": null,
      "cluster": true
    },
    {
      "clusterId": 27,
      "pointCount": 0,
      "x": 119.9667680079382,
      "y": 28.47058781908956,
      "data": {
        "id": 27,
        "longitude": 119.96676800793821,
        "latitude": 28.47058781908956,
        "groupType": 6
      },
      "cluster": false
    },
    {
      "clusterId": 28,
      "pointCount": 0,
      "x": 119.94118426541667,
      "y": 28.461185241132853,
      "data": {
        "id": 28,
        "longitude": 119.9411842654167,
        "latitude": 28.461185241132828,
        "groupType": 6
      },
      "cluster": false
    },
    {
      "clusterId": 29,
      "pointCount": 2,
      "x": 119.92901101598363,
      "y": 28.46245138426704,
      "data": null,
      "cluster": true
    },
    {
      "clusterId": 30,
      "pointCount": 0,
      "x": 119.93054725405256,
      "y": 28.492017666758713,
      "data": {
        "id": 30,
        "longitude": 119.93054725405253,
        "latitude": 28.492017666758706,
        "groupType": 6
      },
      "cluster": false
    },
    {
      "clusterId": 56,
      "pointCount": 3,
      "x": 119.93524489214632,
      "y": 28.465284122333628,
      "data": null,
      "cluster": true
    },
    {
      "clusterId": 57,
      "pointCount": 0,
      "x": 119.95441515962155,
      "y": 28.47167472473771,
      "data": {
        "id": 57,
        "longitude": 119.95441515962155,
        "latitude": 28.471674724737692,
        "groupType": 8
      },
      "cluster": false
    },
    {
      "clusterId": 69,
      "pointCount": 0,
      "x": 119.92249862655683,
      "y": 28.487483056189433,
      "data": {
        "id": 69,
        "longitude": 119.92249862655683,
        "latitude": 28.48748305618944,
        "groupType": 6
      },
      "cluster": false
    },
    {
      "clusterId": 84,
      "pointCount": 0,
      "x": 119.9092751639679,
      "y": 28.494904431177986,
      "data": {
        "id": 84,
        "longitude": 119.9092751639679,
        "latitude": 28.494904431178,
        "groupType": 4
      },
      "cluster": false
    },
    {
      "clusterId": 90,
      "pointCount": 0,
      "x": 119.90366782792837,
      "y": 28.47566567969669,
      "data": {
        "id": 90,
        "longitude": 119.90366782792837,
        "latitude": 28.47566567969669,
        "groupType": 4
      },
      "cluster": false
    },
    {
      "clusterId": 91,
      "pointCount": 0,
      "x": 119.98417541060682,
      "y": 28.5109908606465,
      "data": {
        "id": 91,
        "longitude": 119.98417541060682,
        "latitude": 28.510990860646483,
        "groupType": 4
      },
      "cluster": false
    },
    {
      "clusterId": 93,
      "pointCount": 0,
      "x": 119.90639897879473,
      "y": 28.46788587181382,
      "data": {
        "id": 93,
        "longitude": 119.90639897879471,
        "latitude": 28.467885871813824,
        "groupType": 4
      },
      "cluster": false
    },
    {
      "clusterId": 96,
      "pointCount": 0,
      "x": 119.91905001626886,
      "y": 28.478514031625764,
      "data": {
        "id": 96,
        "longitude": 119.91905001626886,
        "latitude": 28.478514031625757,
        "groupType": 11
      },
      "cluster": false
    },
    {
      "clusterId": 98,
      "pointCount": 0,
      "x": 119.90410846472986,
      "y": 28.489474506510092,
      "data": {
        "id": 98,
        "longitude": 119.90410846472986,
        "latitude": 28.489474506510092,
        "groupType": 4
      },
      "cluster": false
    }
  ]
}