当前位置：首页 > VUE

vue实现搜索附近医院

2026-01-21 19:27:17VUE

实现思路

使用Vue结合高德地图API或百度地图API实现附近医院搜索功能。核心步骤包括获取用户位置、调用地图API搜索附近医院、展示搜索结果。

获取用户位置

通过浏览器Geolocation API获取用户经纬度坐标。需要用户授权位置权限。

vue实现搜索附近医院

navigator.geolocation.getCurrentPosition(
  (position) => {
    const { latitude, longitude } = position.coords;
    this.userLocation = { lat: latitude, lng: longitude };
  },
  (error) => {
    console.error("获取位置失败:", error);
  }
);

调用地图API

以高德地图为例，需要先引入AMap SDK，注册开发者账号获取Key。

vue实现搜索附近医院

<script src="https://webapi.amap.com/maps?v=2.0&key=您的Key"></script>

创建地图实例并搜索周边医院：

initMap() {
  const map = new AMap.Map("map-container", {
    center: [this.userLocation.lng, this.userLocation.lat],
    zoom: 15
  });

  AMap.plugin("AMap.PlaceSearch", () => {
    const placeSearch = new AMap.PlaceSearch({
      type: "医院",
      pageSize: 20
    });
    placeSearch.searchNearBy(
      "",
      [this.userLocation.lng, this.userLocation.lat],
      5000,
      (status, result) => {
        if (status === "complete") {
          this.hospitals = result.poiList.pois;
        }
      }
    );
  });
}

展示搜索结果

在Vue模板中循环渲染医院列表：

<div v-for="hospital in hospitals" :key="hospital.id">
  <h3>{{ hospital.name }}</h3>
  <p>地址：{{ hospital.address }}</p>
  <p>距离：{{ (hospital.distance/1000).toFixed(1) }}公里</p>
</div>

注意事项

需要处理用户拒绝位置授权的情况，提供手动输入位置功能
对移动端需要做响应式适配
医院数据可能需要进一步过滤，排除非医疗机构
考虑添加路线规划功能

完整组件示例

<template>
  <div>
    <div id="map-container"></div>
    <div v-if="hospitals.length">
      <div v-for="hospital in hospitals" :key="hospital.id">
        <h3>{{ hospital.name }}</h3>
        <p>电话：{{ hospital.tel || '暂无' }}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userLocation: null,
      hospitals: []
    };
  },
  mounted() {
    this.getLocation();
  },
  methods: {
    getLocation() {
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(
          this.initMap,
          this.handleLocationError
        );
      }
    },
    initMap(position) {
      // 地图初始化代码
    },
    handleLocationError(error) {
      console.error("位置获取错误:", error);
    }
  }
};
</script>