ReferenceError: AMap is not defined

[majian159]

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

        <APILoader akay="a7a90e05a37d3f6bf76d4a9032fc9129">
          <Map>
            <ScaleControl offset={[16, 30]} position="LB" />
            <ToolBarControl offset={[16, 10]} position="RB" />
            <ControlBarControl offset={[16, 180]} position="RB" />
            <Geolocation
              maximumAge={100000}
              borderRadius="5px"
              position="RB"
              offset={[16, 80]}
              zoomToAccuracy={true}
              showCircle={true}
            />
            <Marker
              title="北京市"
              position={new AMap.LngLat(116.405285, 39.904989)}
            />
          </Map>
        </APILoader>

[jaywcjlove]

@majian159 组件 <APILoader> 是自动判断是否加载 高德地图 SDK，如果全局存在 AMap 对象就不加载 SDK，加载完成之后，全局将会有 window.AMap 对象。<APILoader> 再去加载 子组件

你的实例直接去使用 AMap 对象，SDK 都没有开始加载，所以直接报错的。 解决方案是分开写

const Demo = () => (
  <div style={{ width: '100%', height: '300px' }}>
      <ScaleControl offset={[16, 30]} position="LB" />
      <ToolBarControl offset={[16, 10]} position="RB" />
      <ControlBarControl offset={[16, 180]} position="RB" />
      <Geolocation
        maximumAge={100000}
        borderRadius="5px"
        position="RB"
        offset={[16, 80]}
        zoomToAccuracy={true}
        showCircle={true}
      />
      <Marker
        title="北京市"
        position={new AMap.LngLat(116.405285, 39.904989)}
      />
  </div>
);
ReactDOM.render((
  <APILoader akay="a7a90e05a37d3f6bf76d4a9032fc9129">
    <Demo />
  </APILoader>
), _mount_);

如果你非要写在一起，可以参考如下实例

<div style={{ width: '100%', height: '300px' }}>
  <Map center={[116.397428, 39.90923]} zoom={12}>
    {({ AMap, map, container }) => {
      console.log('map', map)
      if (map) {
        const marker = new AMap.Marker({
          icon: new AMap.Icon({
            imageSize: new AMap.Size(25, 34),
            image: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png'
          }),
          position: [116.405285,39.904989],
          offset: new AMap.Pixel(-13, -30)
        });
        marker.setMap(map);
      }
      return;
    }}
  </Map>
</div>

[majian159]

谢谢

[jifenqi]

const Mark = ({AMap})=>{
    return (
        <>
           {
                arr.map(({x,y},index)=>{
                    let lnglat = new AMap.LngLat(x,y)
                    console.log(x,y,lnglat)
                    return <Marker visiable={true} title="北京市" key={index} position={ lnglat } />
                })
            }
        </>
    )
}
<APILoader akay="a7a90e05a37d3f6bf76d4a9032fc9129">
            <div style={{ width: '100%', height: '100%' }}>
                <Map zoom={4}>
                    <Mark />
                </Map>
            </div>
</APILoader>

没有报错，也没有点标记哎，怎么回事呀

[jaywcjlove]

@jifenqi Map 组件是其他组件的基础，Map 组件会给所有的子组件注入两个属性 map 和 BMap

const Mark = ({AMap})=>{
    return (
        <>
           {
                arr.map(({x,y},index)=>{
                    let lnglat = new AMap.LngLat(x,y)
                    console.log(x,y,lnglat)
                    return (
                        <Marker
+                        AMap={AMap}
+                        map={map}
                        visiable={true} title="北京市" key={index} position={ lnglat } />
                    )
                })
            }
        </>
    )
}

如果还不行，可以使用 https://codesandbox.io/ 给我看一下你的实例

[jifenqi]

@jaywcjlove 能显示出来啦，谢谢

[jaywcjlove]

@lyquita 木有理解你的意思，你可以再包一层。

[huiwi]

@majian159 组件 <APILoader> 是自动判断是否加载 高德地图 SDK，如果全局存在 AMap 对象就不加载 SDK，加载完成之后，全局将会有 window.AMap 对象。<APILoader> 再去加载 子组件

你的实例直接去使用 AMap 对象，SDK 都没有开始加载，所以直接报错的。 解决方案是分开写

const Demo = () => (
  <div style={{ width: '100%', height: '300px' }}>
      <ScaleControl offset={[16, 30]} position="LB" />
      <ToolBarControl offset={[16, 10]} position="RB" />
      <ControlBarControl offset={[16, 180]} position="RB" />
      <Geolocation
        maximumAge={100000}
        borderRadius="5px"
        position="RB"
        offset={[16, 80]}
        zoomToAccuracy={true}
        showCircle={true}
      />
      <Marker
        title="北京市"
        position={new AMap.LngLat(116.405285, 39.904989)}
      />
  </div>
);
ReactDOM.render((
  <APILoader akay="a7a90e05a37d3f6bf76d4a9032fc9129">
    <Demo />
  </APILoader>
), _mount_);

如果你非要写在一起，可以参考如下实例

<div style={{ width: '100%', height: '300px' }}>
  <Map center={[116.397428, 39.90923]} zoom={12}>
    {({ AMap, map, container }) => {
      console.log('map', map)
      if (map) {
        const marker = new AMap.Marker({
          icon: new AMap.Icon({
            imageSize: new AMap.Size(25, 34),
            image: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png'
          }),
          position: [116.405285,39.904989],
          offset: new AMap.Pixel(-13, -30)
        });
        marker.setMap(map);
      }
      return;
    }}
  </Map>
</div>

分开写以后还是报相同的错

[jaywcjlove]

@Garea-git 如果使用 https://codesandbox.io/embed/react-amap-example-y0n6c-y0n6c?fontsize=14&hidenavigation=1&theme=dark
能重现错误，我可以帮你看一下

[huiwi]

@Garea-git 如果使用 https://codesandbox.io/embed/react-amap-example-y0n6c-y0n6c?fontsize=14&hidenavigation=1&theme=dark 能重现错误，我可以帮你看一下

import React, { useState } from 'react'
import styles from './index.module.less'
import { Map, APILoader, Marker } from '@uiw/react-amap'
const Demo = () => {
  const [location, setLocation] = useState([120.499386, 28.047345])
  return (
    <>
      <div className={styles.container}>
        <Map style={{ height: '100%' }} center={location} >
          <Marker position={new AMap.LngLat(120.499386, 28.047345)} />
        </Map>
      </div>
      <div className={styles.showArea}>
        <div className={styles.btnArea}>
          <span className={styles.locationIcon} onClick={() => setLocation([120.499386, 28.047345])}>
            <svg t="1669188306055" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3177" width="128" height="128"><path d="M512 902.4a390.4 390.4 0 1 1 0-780.8 390.4 390.4 0 0 1 0 780.8z m0-64a326.4 326.4 0 1 0 0-652.8 326.4 326.4 0 0 0 0 652.8z" fill="#5A5A68" p-id="3178"></path><path d="M870.4 544a32 32 0 1 1 0-64h102.4a32 32 0 1 1 0 64h-102.4z" fill="#5A5A68" p-id="3179"></path><path d="M512 512m-204.8 0a204.8 204.8 0 1 0 409.6 0 204.8 204.8 0 1 0-409.6 0Z" fill="#5A5A68" p-id="3180"></path><path d="M544 153.6a32 32 0 1 1-64 0V51.2a32 32 0 1 1 64 0v102.4zM480 870.4a32 32 0 1 1 64 0v102.4a32 32 0 1 1-64 0v-102.4zM153.6 480a32 32 0 1 1 0 64H51.2a32 32 0 1 1 0-64h102.4z" fill="#5A5A68" p-id="3181"></path></svg>
          </span>
        </div>
        <div className={styles.card}>
          <div className={styles.title}>
            <img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.y1l9vc1r9VreleEEUursrAHaHa?w=173&h=180&c=7&r=0&o=5&dpr=1.2&pid=1.7" alt="" />
            <div style={{ display: 'flex', flexDirection: 'column' }}>
              <span style={{ fontWeight: '600', marginBottom: '10px', fontSize: '2.133vw' }}>雅漾村-菜市场门口</span>
              <span style={{ fontSize: '1.867vw', color: 'rgb(38,69,189)' }}>设备编号：<span>1887578979</span></span>
            </div>
          </div>
          <div className={styles.info}>
            <div>
              <span>
                湿度：
                <span className={styles.number} style={{ color: 'rgb(0,196,171)' }}>45</span>
                <span className={styles.symbol}>%</span>
              </span>
            </div>
            <div>
              <span>
                温度：
                <span className={styles.number} style={{ color: 'rgb(251,84,70)' }}>45</span>
                <span className={styles.symbol}>°C</span>
              </span>
            </div>
            <div>
              <span>
                风速：
                <span className={styles.number} style={{ color: 'rgb(128,114,249)' }}>45</span>
                <span className={styles.symbol}>m/s</span>
              </span>
            </div>
          </div>
          <span className={styles.updateTime}>上次更新2022年11月20日 12:29</span>
        </div>
      </div>
    </>
  )
}
const MapInfo = () => {
  <APILoader akay="f1c02fdf004a4effdcd9a426d3687166">
    <Demo />
  </APILoader>
}
export default MapInfo

@jaywcjlove 这个是我的代码，麻烦帮我看看

[jaywcjlove]

@Garea-git 如果使用 https://codesandbox.io/embed/react-amap-example-y0n6c-y0n6c?fontsize=14&hidenavigation=1&theme=dark 能重现错误，我可以帮你看一下

[huiwi]

@Garea-git 如果使用 https://codesandbox.io/embed/react-amap-example-y0n6c-y0n6c?fontsize=14&hidenavigation=1&theme=dark 能重现错误，我可以帮你看一下

等会儿，我看一下这个怎么用，我不太懂

[huiwi]

https://codesandbox.io/embed/react-amap-example-react-17-forked-kgd45r?fontsize=14&hidenavigation=1&theme=light

@jaywcjlove

[jaywcjlove]

@Garea-git 代码错误

- const MapInfo = () => {
+ const MapInfo = () => (
  <APILoader akay="f1c02fdf004a4effdcd9a426d3687166">
    <Demo />
  </APILoader>
- }
+ )

[jaywcjlove]

@Garea-git https://codesandbox.io/embed/react-amap-example-react-17-forked-08ijel?fontsize=14&hidenavigation=1&theme=dark