react项目中基本使用高德地图

144 阅读1分钟

1.index.html入口文件配置:

<script type="text/javascript">  


        window._AMapSecurityConfig = {

            securityJsCode:'您申请的安全密钥',

        }

</script>

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值&plugin=AMap.MarkerClusterer,插件"></script>

//多个插件时,用逗号进行分隔

2.下载适配于react项目的高德地图的第三方包:

集成了所有依赖包

npm install @uiw/react-amap --save

或者按需安装包

npm install @uiw/react-amap-map @uiw/react-amap-api-loader --save

3.组件引入第三方包:

//按需引入插件

import { Map, APILoader, Marker } from '@uiw/react-amap';

4.组件中使用:

// 注意组件中属性没有写,需手动按需书写

  */}

      <Map style={{ height: 300 }} >

        {/* 收到缩放或放大地图 :无法和点标记一起使用 */}

        {/* <ToolBarControl visiable={show} offset={[10, 10]} position="RT" /> */}

        {/* 获取城市实时天气 */}

       

        {({ AMap, map, container }) => {

          return

            {/* 文本标记 */}

           

            {/* 点标记 */}

           

         

        }}