extjs 6 中的谷歌街景

如何解决extjs 6 中的谷歌街景

我是 extjs 的新手，无法找到将谷歌街景放入面板的方法。有人可以指出我正确的方向吗？我曾尝试将面板内的 html 解释为旧的 GMapPanel，但我不起作用。

function () {
    alert("mostrar street view");

    new Ext.Panel({
        id: "streetView",xtype: "map",constrain: true,floating: true,resize: true,width: 600,height: 400,closable: true,style: {
            backgroundColor: "#fff",//backgroundColor: '#000',border: "1px solid black",},listeners: {
            click: Ext.Window({
                layout: "fit",closeAction: "hide",title: "GPanorama Window",width: 400,height: 300,x: 480,y: 60,items: {
                    xtype: "gmappanel",gmapType: "panorama",setCenter: {
                        lat: 42.345573,long: -71.098326,}),draggable: {
            delegate: "div",}).show();

我也尝试将属性 html 放置如下 html:'CODE-BELOW'

    <head>
    <title>Street View split-map-panes</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <style type="text/css">
        html,body {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #map,#pano {
            float: left;
            height: 100%;
            width: 50%;
        }
    </style>
    <script>
        function initialize() {
                const fenway = { lat: 42.345573,lng: -71.098326 };
                const map = new google.maps.Map(document.getElementById("map"),{
                    center: fenway,zoom: 14,});
                const panorama = new google.maps.StreetViewPanorama(
                    document.getElementById("pano"),{ position: fenway,pov: { heading: 34,pitch: 10 } }
                );
                map.setStreetView(panorama);
            }
    </script>
</head>

<body>
    <div id="map"></div>
    <div id="pano"></div>
    <script
        src="https://maps.googleapis.com/maps/api/js?key=API-KEY&callback=initialize&libraries=&v=weekly"
        async></script>
</body>

extjs 6 中的谷歌街景

如何解决extjs 6 中的谷歌街景

相关推荐