在react的函数组件中使用高德API在不显示地图的前提下实现定位,附近医院搜索展示

JackMamjt

已于 2024-03-13 19:58:07 修改

阅读量442

点赞数 13

文章标签： react.js 前端前端框架

于 2024-03-13 19:36:54 首次发布

本文链接：https://blog.csdn.net/JackMamjt/article/details/136688609

版权

话不多说,直接进入正题

1.申请高德key和安全密钥:

申请key的部分依据高德api提示处傻瓜式注册即可获得,申请完成后,打开右上角头像,在应用管理->我的应用中即可查看到自己的密钥和key

2.返回到api界面搜索react,即可出现''JS API 结合React使用''项,选择进入

这里我们只需执行第一步下载依赖包

3.脚手架配置密钥

在react脚手架中public->index.html中添加script标签:

window._AMapSecurityConfig = {

securityJsCode: "你的密钥", //放置要更换的密钥

};

</script>

4.在相应组件中添加如下代码

直接在自己的.js文件中复制以下代码即可

import { useEffect, useMemo, useState, useCallback } from "react";

import AMapLoader from "@amap/amap-jsapi-loader";



export default function MapContainer() {

let [AMap,setAMap] = useState(null)

let map = null;

let [city,setCity] = useState('')

let [curlat,setcurlat] = useState(0)

let [curlng,setcurlng] = useState(0)

let [hospitalList,sethospitalList] = useState([])



//函数区

let getCity = ()=>{

  var options = {

    city:city,

  };

  if(AMap !== null){

    var auto1 = new AMap.AutoComplete(options);  //实例化AutoComplete模块

    auto1.search('医院', function(status, result) {

      sethospitalList(result.tips)

    })

  }

}

let dataList = useMemo(()=>{

  let list = []

  hospitalList.forEach(elem=>{

    if(elem.id!==''){

      let obj = {}

      obj.id = elem.id

      obj.name = elem.name

      obj.district = elem.district

      // console.log((elem.location));

      var p1 = [curlng, curlat];

      var p2 = [elem.location.lng, elem.location.lat];

      // 返回 p1 到 p2 间的地面距离，单位：米

      var dis = AMap.GeometryUtil.distance(p1, p2);

      obj.distance = (dis/1000).toFixed(1)

      obj.type = ['三甲','综合医院']

      obj.department = ['皮肤科,骨科,妇科,儿童科,眼科,牙科']

      // console.log(obj);

      list.push(obj)

    }

  })

  // console.log(list);

  return list

},[hospitalList])

function onComplete(data) {

  // console.log(data);   //显示定位成功时候的位置信息

  setcurlat(data.position.lat)

  setcurlng(data.position.lng)

}

function onError(data) {

    console.log(data);

}

useEffect(() => {

    AMapLoader.load({

    key: "你的key", // 申请好的Web端开发者Key，首次调用 load 时必填

    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15

    plugins: ["AMap.AutoComplete",'AMap.PlaceSearch','AMap.Geolocation','AMap.CitySearch'], // 添加输入提示插件

    })

.then((AMap) => {

    setAMap(AMap)   //实现外部调用AMap

    var geolocation = new AMap.Geolocation({    //实例化定位Geolocation模块

      enableHighAccuracy: true,//是否使用高精度定位，默认:true

      // timeout: 10000,          //超过10秒后停止定位，默认：5s

      position:'RB',    //定位按钮的停靠位置

      offset: [10, 20], //定位按钮与设置的停靠位置的偏移量，默认：[10, 20]

      zoomToAccuracy: true,   //定位成功后是否自动调整地图视野到定位点

      convert: true,

    });

    geolocation.getCurrentPosition(function(status,result){     //定位插件执行定位函数

      if(status==='complete'){

          onComplete(result)

      }else{

          onError(result)

      }

    });

    var citysearch = new AMap.CitySearch(); //实例化获取当前所在城市信息的插件

    citysearch.getLocalCity((status, result)=> {    //执行相应获取城市信息的函数

      if (status === 'complete' && result.info === 'OK') {

          if (result && result.city && result.bounds) {

              var cityinfo = result.city;

              var citybounds = result.bounds;



              console.log(cityinfo,citybounds);

              setCity(cityinfo)

          }

      } else {

          console.log(result.info);

      }

  });

    var autoOptions = {

    input: "input_id",

    city:city

  };

    var auto = new AMap.AutoComplete(autoOptions);  //实例化AutoComplete模块

    auto.search('医院', function(status, result) {

      // 搜索成功时，result即是对应的匹配数据

      // console.log(result.tips);  //初次搜索到的信息

      sethospitalList(result.tips)

    })

})



.catch((e) => {

  console.log(e);

});

return () => {

map?.destroy();

};



}, []);



useEffect(()=>{

  getCity()

},[city])



return (

<div>

<div>

    <p>{city}</p>

    <p>{curlat}</p>

    <p>{curlng}</p>

</div>

<div>

  {

    dataList.map((elem,index)=>{

      // console.log(elem);

      return <div key={elem.id}>

                <img src={`/hospital_img/h${index}.jpg`} alt="" style={{width:'50px',height:'50px'}}/>

            <div>

                  <p>{elem.name}</p>

                  <p>{'距离您:'+elem.distance+'千米'}</p>

                  <p>

                    主要部门:{elem.department.map((item,index)=>{

                    return <span key={index}>{item}</span>

                  })}

                  </p>

                  <p>

                    主要部门:{elem.type.map((items,index)=>{

                    return <span key={index}>{items}</span>

                  })}

                  </p>

            </div>

      </div>

    })

  }

</div>

</div>

);

}