ReferenceError: AMap is not defined #45

majian159 · 2021-01-13T02:35:08Z

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 · 2021-01-13T03:07:30Z

@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 · 2021-01-14T01:54:32Z

谢谢

jifenqi · 2021-02-24T12:06:37Z

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 · 2021-02-25T01:36:19Z

@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 · 2021-02-25T02:45:02Z

@jaywcjlove 能显示出来啦，谢谢

jaywcjlove · 2022-02-25T09:55:50Z

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

huiwi · 2022-11-24T06:47:47Z

@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 · 2022-11-24T06:51:27Z

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

huiwi · 2022-11-24T07:13:11Z

@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 · 2022-11-24T07:14:13Z

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

huiwi · 2022-11-24T07:17:27Z

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

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

huiwi · 2022-11-24T07:27:44Z

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

@jaywcjlove

jaywcjlove · 2022-11-24T08:07:30Z

@Garea-git 代码错误

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

jaywcjlove · 2022-11-24T08:07:51Z

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

huiwi · 2022-11-24T08:12:53Z

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

不是这个问题，我刚才代码写错了，但是改完后还是有报错

huiwi · 2022-11-24T08:15:34Z

这是我这个组件的代码

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 = () => {
  return (
    <APILoader akay="f1c02fdf004a4effdcd9a426d3687166">
      <Demo />
    </APILoader>
  )
}
export default MapInfo

然后我在App.js引用

import React from 'react'
import MapInfo from './MapInfo'
export default function App() {
  return (
    <>
      <MapInfo />
    </>
  )
}

jaywcjlove · 2022-11-24T08:19:09Z

@majian159 代码贴到示例里面啊

jaywcjlove · 2022-11-24T08:23:00Z

@Garea-git https://codesandbox.io/s/react-amap-example-react-18-uiwjs-react-amap-issues-45-08ijel

有什么问题？

huiwi · 2022-11-24T08:28:17Z

@Garea-git https://codesandbox.io/s/react-amap-example-react-18-uiwjs-react-amap-issues-45-08ijel

有什么问题？

刚才我看了一下确实好了，但是我改了一下marker的坐标，就又报错了

huiwi · 2022-11-24T08:32:26Z

我在CodeSandBox改了一下坐标，也会报错说'AMap' is not defined,但是页面可以正常显示，我在本机上改却没法正常显示

jaywcjlove · 2022-11-24T08:56:19Z

@majian159 这个是ESLint 的错误，在代码的顶部添加 /*global AMap*/ 错误就没有了，或者修改 ESLint 配置，如果用 TS，默认引入了类型包，不会报错。

AMap 对象是全局对象没有声明，它是通过加载地图SDK 完成后生成的全局对象

jaywcjlove · 2022-11-24T08:56:45Z

huiwi · 2022-11-24T08:57:44Z

@majian159 这个是ESLint 的错误，在代码的顶部添加 /*global AMap*/ 错误就没有了，或者修改 ESLint 配置，如果用 TS，默认引入了类型包，不会报错。

AMap 对象是全局对象没有声明，它是通过加载地图SDK 完成后生成的全局对象

ok,麻烦你了，谢谢

huiwi · 2022-11-24T09:01:37Z

@jaywcjlove 还有一个问题，我这里Marker的位置会随着地图的缩放改变是什么原因

jaywcjlove · 2022-11-24T09:38:08Z

@Garea-git 有问题新起一个 issue 讨论

majian159 closed this as completed Jan 14, 2021

jaywcjlove mentioned this issue Jun 4, 2021

使用new AMap.LngLat(116.379028, 39.865042)的时候，会报ReferenceError: AMap is not defined这个错 #88

Closed

jaywcjlove mentioned this issue Jun 15, 2021

AMap.Geocoder #100

Open

jaywcjlove mentioned this issue Sep 9, 2021

如何显示默认地图类型 #139

Open

jaywcjlove mentioned this issue Oct 28, 2021

报错：未找到 AMap #172

Closed

jaywcjlove mentioned this issue Feb 25, 2022

Uncaught ReferenceError: AMap is not defined #211

Closed

jaywcjlove mentioned this issue Nov 6, 2022

ReferenceError: AMap is not defined #257

Closed

jaywcjlove mentioned this issue Nov 16, 2022

AMap is not defined uiwjs/react-baidu-map#289

Closed

huiwi mentioned this issue Nov 25, 2022

@jaywcjlove 还有一个问题，我这里Marker的位置会随着地图的缩放改变是什么原因 #261

Closed

jaywcjlove mentioned this issue Mar 10, 2023

ReferenceError: AMap is not defined #300

Closed

jaywcjlove pinned this issue Mar 10, 2023

jaywcjlove mentioned this issue Nov 30, 2023

Uncaught ReferenceError: BMAP_DRAWING_POLYGON is not defined uiwjs/react-baidu-map#320

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

ReferenceError: AMap is not defined #45

ReferenceError: AMap is not defined #45

majian159 commented Jan 13, 2021 •

edited

Loading

jaywcjlove commented Jan 13, 2021

majian159 commented Jan 14, 2021

jifenqi commented Feb 24, 2021 •

edited

Loading

jaywcjlove commented Feb 25, 2021

jifenqi commented Feb 25, 2021

jaywcjlove commented Feb 25, 2022

huiwi commented Nov 24, 2022

jaywcjlove commented Nov 24, 2022

huiwi commented Nov 24, 2022

jaywcjlove commented Nov 24, 2022

huiwi commented Nov 24, 2022

huiwi commented Nov 24, 2022

jaywcjlove commented Nov 24, 2022

jaywcjlove commented Nov 24, 2022

huiwi commented Nov 24, 2022

huiwi commented Nov 24, 2022

jaywcjlove commented Nov 24, 2022

jaywcjlove commented Nov 24, 2022

huiwi commented Nov 24, 2022

huiwi commented Nov 24, 2022

jaywcjlove commented Nov 24, 2022

jaywcjlove commented Nov 24, 2022

huiwi commented Nov 24, 2022

huiwi commented Nov 24, 2022

jaywcjlove commented Nov 24, 2022

ReferenceError: AMap is not defined #45

ReferenceError: AMap is not defined #45

Comments

majian159 commented Jan 13, 2021 • edited Loading

jaywcjlove commented Jan 13, 2021

majian159 commented Jan 14, 2021

jifenqi commented Feb 24, 2021 • edited Loading

jaywcjlove commented Feb 25, 2021

jifenqi commented Feb 25, 2021

jaywcjlove commented Feb 25, 2022

huiwi commented Nov 24, 2022

jaywcjlove commented Nov 24, 2022

huiwi commented Nov 24, 2022

jaywcjlove commented Nov 24, 2022

huiwi commented Nov 24, 2022

huiwi commented Nov 24, 2022

jaywcjlove commented Nov 24, 2022

jaywcjlove commented Nov 24, 2022

huiwi commented Nov 24, 2022

huiwi commented Nov 24, 2022

jaywcjlove commented Nov 24, 2022

jaywcjlove commented Nov 24, 2022

huiwi commented Nov 24, 2022

huiwi commented Nov 24, 2022

jaywcjlove commented Nov 24, 2022

jaywcjlove commented Nov 24, 2022

huiwi commented Nov 24, 2022

huiwi commented Nov 24, 2022

jaywcjlove commented Nov 24, 2022

majian159 commented Jan 13, 2021 •

edited

Loading

jifenqi commented Feb 24, 2021 •

edited

Loading