/* eslint-disable no-undef */
import React from 'react';
import { Map, APILoader, ToolBarControl, Marker, InfoWindow } from '@uiw/react-amap';

const MyMaps = () => {
    const info = [];
    info.push("<div class='input-card content-window-card'><div><img style=\"float:left;width:67px;height:16px;\" src=\" https://webapi.amap.com/images/autonavi.png \"/></div> ");
    info.push("<div style=\"padding:7px 0px 0px 0px;\"><h4>高德软件</h4>");
    info.push("<p class='input-item'>电话 : 028-84107000   邮编 : 610000</p>");
    info.push("<p class='input-item'>地址 :四川省成都市高新区剑南大道中段时代晶座1537号3栋11层3号</p></div></div>");
    return (
        <div style={{ width: '100%', height: '300px', margin: '30px 0' }}>
            <Map
                center={[104.046771, 30.542866]}
                zoom={15}
            >
                <Marker title="公司地址" position={new AMap.LngLat(104.046771, 30.542866)} />
                <ToolBarControl offset={[10, 10]} position="RT" />
                <InfoWindow visiable={true}
                    content={info.join('')}
                    position={[104.046771, 30.542866]}
                />
            </Map>
        </div>
    )
};

const Mount = () => (
    <APILoader akey="a7233fb1f89aba915a57e1c45bee5577">
        <MyMaps />
    </APILoader>
);

export default Mount;