百度地图vue地址逆解析

在 Vue 中使用百度地图进行地址逆解析需要进行以下步骤：

1. 引入百度地图 JavaScript API

在 `public/index.html` 文件中添加以下代码：

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的AK"></script>

其中，`你的AK` 需要替换成你申请的百度地图 API 的 AK。

2. 在组件中创建地图实例

在 Vue 组件中，可以通过 `mounted()` 钩子函数来创建地图实例。在创建地图实例时，需要指定地图的容器和地图的初始缩放级别。

mounted() {
  // 创建地图实例
  const map = new BMap.Map("map-container");
  // 设置地图初始缩放级别
  map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
}

其中，`map-container` 是一个 div 容器的 ID，用于放置地图。

3. 添加标记点

在地图上添加标记点可以使用 `BMap.Marker` 类。需要指定标记点的位置和标记点的样式。

mounted() {
  // 创建地图实例
  const map = new BMap.Map("map-container");
  // 设置地图初始缩放级别
  map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);

  // 添加标记点
  const point = new BMap.Point(116.404, 39.915);
  const marker = new BMap.Marker(point);
  map.addOverlay(marker);
}

4. 地址逆解析

在地图上添加标记点后，可以通过 `BMap.Geocoder` 类进行地址逆解析。需要指定逆解析的位置和逆解析成功后的回调函数。

mounted() {
  // 创建地图实例
  const map = new BMap.Map("map-container");
  // 设置地图初始缩放级别
  map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);

  // 添加标记点
  const point = new BMap.Point(116.404, 39.915);
  const marker = new BMap.Marker(point);
  map.addOverlay(marker);

  // 地址逆解析
  const geoc = new BMap.Geocoder();
  geoc.getLocation(point, (rs) => {
    const addComp = rs.addressComponents;
    console.log(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
  });
}

以上代码中的逆解析结果将会在控制台中输出。

注意：在使用百度地图 API 进行地址逆解析时，需要注意跨域问题。如果你的项目在本地运行时出现跨域问题，可以在 `public/index.html` 文件中添加以下代码：

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

这样就完成了百度地图的地址逆解析。