react高德地图定位--显示城市名字

react函数组件高德地图定位–显示城市名字

一、注册账号并申请Key
1.首先，注册开发者账号，成为高德开放平台开发者
2. 登陆之后，在进入「应用管理」 页面「创建新应用」
3. 为应用添加 Key，「服务平台」一项请选择「 Web 端 ( JSAPI ) 」，设置域名白名单，可选（建议设置域名白名单）。
4. 添加成功后，可获取到key值和安全密钥jscode

二、在html文档中引入一下代码，搭配静态安全密钥以明文设置

<script type="text/javascript">
        window._AMapSecurityConfig = {
            securityJsCode:'您申请的安全密钥',
        }
</script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=您申请的key值"></script> 

三、在需要显示定位城市的函数式组件内，引入一下代码

import React, { useEffect, useState } from 'react'
export default function Movie() {
  const AMap = window.AMap
  let [city, setCity] = useState()
  //城市定位
  useEffect(() => {
    AMap.plugin('AMap.CitySearch', () => {
      const citySearch = new AMap.CitySearch()
      citySearch.getLocalCity((status, result) => {
        setCity(result.city);
      })
    })
  })
  return (
    <div>
      <div>{city}</div>//这里面就是定位显示出来的城市名字了
    </div>
  )
}