react使用地图

复制代码
 useEffect(() => {
        const loadAMap = () => {
          return new Promise((resolve, reject) => {
            if (window.AMap) {
              resolve(window.AMap);
            } else {
              const script = document.createElement('script');
              script.src = 'https://webapi.amap.com/maps?v=2.0&key=40335db62d1bb586ba8505e0c06ccac1';
              script.async = true;
              script.onerror = reject;
              script.onload = () => {
                resolve(window.AMap);
              };
              document.head.appendChild(script);
            }
          });
        };
        loadAMap().then((AMap) => {
            new AMap.Map('container', {
              viewMode: '2D',
              zoom: 17,
              center: [116.867982,36.683662 ]
            });
            
          }).catch((error) => {
            console.error('加载地图失败', error);
          })
      }, []);
相关推荐
weixin_45979310几秒前
SSE 模仿 GPT 响应
前端
rookie fish6 分钟前
Electron+Vite+Vue项目中,如何监听Electron的修改实现和Vue一样的热更新?[特殊字符]
前端·vue.js·electron
她超甜i11 分钟前
前端通过后端给的webrtc的链接,在前端展示,并更新实时状态
前端·javascript·webrtc
歪歪10017 分钟前
Redux和MobX在React Native状态管理中的优缺点对比
前端·javascript·react native·react.js·架构·前端框架
东风西巷20 分钟前
Atlantis Word Processor:全方位的文字处理专家
前端·学习·word·软件需求
今天不要写bug33 分钟前
基于elementUI实现一个可编辑的表格(简洁版)
前端·javascript·elementui
上优35 分钟前
Vue3纯前端同源跨窗口通信移动AGV小车
前端·vue.js·状态模式
h_k1008636 分钟前
Chrome 插件开发入门技术文章大纲
前端·chrome
一只小阿乐36 分钟前
vue-router 的实现原理
前端·javascript·vue.js·路由·vue-router
Zz_waiting.37 分钟前
案例开发 - 日程管理 - 第七期
开发语言·前端·javascript·vue.js·html·路由