index.less:

.sssssssss{
  height: 500px;
  width: 100%;
}

index.tsx:

import React, { useState, useEffect } from 'react';
import MapComponent from './gddt'

export default () => {
  const [loading, setLoading] = useState<boolean>(true);
  useEffect(() => {
    setTimeout(() => {
      setLoading(false);
    }, 3000);
  }, []);

  return (
    <>
    <MapComponent />
    </>
  );
};

gddt.tsx代码:

import React from 'react';
import styles from './index.less';


// tslint:disable-next-line:max-classes-per-file
class MapComponent extends React.Component {

    public componentDidMount() {
        window.onLoad = function () {
            var map = new AMap.Map('map');
        }
        var url = 'https://webapi.amap.com/maps?v=1.4.15&key=你申请的key&callback=onLoad';
        var jsapi = document.createElement('script');
        jsapi.charset = 'utf-8';
        jsapi.src = url;
        document.head.appendChild(jsapi);
    }
    public render() {
        return (
            <>   //这里要加样式 高 宽
                <div id="map" className={styles.sssssssss} ></div>
            </>
        )
    }
}

export default MapComponent;

效果图:
QQ图片20200323161027.png


版权声明:本文为原创文章,版权归 吾爱博客 所有,转载请联系博主获得授权!
本文地址:https://www.52bd.net/html/172.html

已有 2 条评论

  1. 为什么加入代码之后不显示?

    1. 这个不能丢 &callback=onLoad

发表评论

正在加载 Emoji
×