React Azure Map 错误 - TypeError：无法读取未定义的属性（读取“getCurrentStack”）

问题描述 投票：0回答：1

有人在使用azure地图弹出窗口时遇到过这个错误吗？我创建了一个显示天蓝色地图的反应控件，其工作正常，仅显示地图和图钉。但是，如果我包含一个弹出窗口来显示我的引脚详细信息，则会发生错误。这是部分代码。

import * as React from 'react';
import { useState, useEffect } from 'react';
import { IInputs } from '../generated/ManifestTypes';
import { Stack } from '@fluentui/react/lib/Stack';
import { AzureMap, AzureMapsProvider, IAzureMapOptions, AzureMapDataSourceProvider, AzureMapLayerProvider, AzureMapFeature, AzureMapPopup } from 'react-azure-maps';
import { AuthenticationType, data, MapMouseEvent} from 'azure-maps-control';
import 'azure-maps-control/dist/atlas.min.css';

export interface AzureMapsGridProp {
mapContext: ComponentFramework.Context;
items?: any[];
}

const baseMapOptions: IAzureMapOptions = {
zoom: 10,
center: [0, 0],
language: 'en-US',
view: 'Auto',
}

const renderPoint = (): data.Position => {
const randomLongitude = Math.floor(Math.random() * (-80 - -120) + -120);
const randomLatitude = Math.floor(Math.random() * (30 - 65) + 65);
return new data.Position(randomLongitude, randomLatitude);
};

export const AzureMapsGrid: React.FunctionComponent = (props) => {
const contextWebApi: any = props.mapContext.webAPI;
const [azureMapOptions, setAzureMapOptions] = useState(baseMapOptions);
const [showMap, setShowMap] = useState(false);
const [coords1, setCoords1] = useState<data.Position>(renderPoint);
const [isVisible, setIsVisible] = useState(false);

//Checking if Azure Map control is supported on user's browser
useEffect(() => {
    CreateAzureMapToken(props.mapContext);
},[]);

useEffect(() => {
    if (azureMapOptions.authOptions){
        setShowMap(true);
    }
}, [azureMapOptions.authOptions]);

//Custom API Call for Creating Azure Map Token
const CreateAzureMapToken = async(context:  ComponentFramework.Context<IInputs>) => {

    //initialize Create Azure Maps Token Request
    let createAzureMapsToken_Request = {    
        getMetadata: function () {
            return {
                boundParameter: null,
                parameterTypes: {},
                operationType: 0, operationName: "<generate token custom api name here>"
            };
        }
    };

    contextWebApi.execute(createAzureMapsToken_Request).then(
        function success(response: any) {
            if (response.ok) { return response.json(); }
        }
    ).then(function (responseBody: any) {

        let result = responseBody;
        let token = result["Token"]; // Edm.String
        let xMSClientId = result["X-MS-CLIENT-ID"]; // Edm.String

        UpdateAzureMapOptions(xMSClientId, token);
    }).catch(function (error: any) {
        console.log(error.message);

        context.navigation.openErrorDialog({
        errorCode: error.errorCode,
        details: error.message,
        message: error.raw
        });
    });
}

const UpdateAzureMapOptions = async(ClientId: string, bearerToken: string) => {

let updatedOptions = {
    ...azureMapOptions, 
    authOptions: {
        authType: AuthenticationType.anonymous,
        clientId: ClientId,
        getToken: async (resolve: any, reject: any) => {
            resolve(bearerToken);
        }
    }
}

setAzureMapOptions(updatedOptions);
}

return(
    <Stack id='azureMapContainer' styles={{root: {height: '500px', position: 'relative'}}}>
        {showMap && <AzureMapsProvider>
            <AzureMap 
                options={azureMapOptions}>
                <AzureMapDataSourceProvider id={'DataSource Provider'}>
                    <AzureMapLayerProvider
                        id={"Layer1"}
                        options={{
                            iconOptions: {
                                image: 'marker-blue',
                            }
                        }}
                        type={"SymbolLayer"}
                        events={{
                            click: (e: MapMouseEvent) => {
                                if (e.shapes && e.shapes.length > 0) {
                                    setIsVisible(true);
                                }
                            }
                        }}/>
                        <AzureMapFeature
                            key={'Pin1'}
                            id={'Pin1'}
                            type="Point"
                            coordinate={coords1}
                            properties={{
                                title: 'Pin',
                                icon: 'marker-blue',
                            }}
                        />
                </AzureMapDataSourceProvider>
                <AzureMapPopup
                    isVisible={isVisible}
                    options={{ closeButton: true,
                        position: [0, 0],
                        pixelOffset: [0, -5],           
                        showPointer: true}}
                    popupContent={<div>Hello World</div>}
                />
            </AzureMap>
        </AzureMapsProvider>}
    </Stack>
);
}

如果我删除这部分

               <AzureMapPopup
                    isVisible={isVisible}
                    options={{ closeButton: true,
                        position: [0, 0],
                        pixelOffset: [0, -5],           
                        showPointer: true}}
                    popupContent={<div>Hello World</div>}
                />

组件将按预期工作。但这部分正是我需要的。

以下是错误的详细信息：


Error Details: TypeError: Cannot read properties of undefined (reading 'getCurrentStack')
    at performWork (webpack://pcf_tools_652ac3f36e1e4bca82eb3c1dc44e6fad/./node_modules/react-dom/cjs/react-dom-server-legacy.browser.development.js?:5752:60)
    at eval (webpack://pcf_tools_652ac3f36e1e4bca82eb3c1dc44e6fad/./node_modules/react-dom/cjs/react-dom-server-legacy.browser.development.js?:6033:16)
    at scheduleWork (webpack://pcf_tools_652ac3f36e1e4bca82eb3c1dc44e6fad/./node_modules/react-dom/cjs/react-dom-server-legacy.browser.development.js?:69:7)
    at startWork (webpack://pcf_tools_652ac3f36e1e4bca82eb3c1dc44e6fad/./node_modules/react-dom/cjs/react-dom-server-legacy.browser.development.js?:6032:7)
    at renderToStringImpl (webpack://pcf_tools_652ac3f36e1e4bca82eb3c1dc44e6fad/./node_modules/react-dom/cjs/react-dom-server-legacy.browser.development.js?:6096:7)
    at renderToStaticMarkup (webpack://pcf_tools_652ac3f36e1e4bca82eb3c1dc44e6fad/./node_modules/react-dom/cjs/react-dom-server-legacy.browser.development.js?:6116:14)
    at A (webpack://pcf_tools_652ac3f36e1e4bca82eb3c1dc44e6fad/./node_modules/react-azure-maps/dist/react-azure-maps.es5.js?:476:88)
    at eval (webpack://pcf_tools_652ac3f36e1e4bca82eb3c1dc44e6fad/./node_modules/react-azure-maps/dist/react-azure-maps.es5.js?:497:11)
    at ra (https://content.powerapps.com/resource/uci-infra-bus/scripts/vendor.1cae5aa28fca3d26e5e989792f80fda6.js:9:58877)
    at qa (https://content.powerapps.com/resource/uci-infra-bus/scripts/vendor.1cae5aa28fca3d26e5e989792f80fda6.js:9:68395)
    at Ia (https://content.powerapps.com/resource/uci-infra-bus/scripts/vendor.1cae5aa28fca3d26e5e989792f80fda6.js:9:67729)
    at Ma (https://content.powerapps.com/resource/uci-infra-bus/scripts/vendor.1cae5aa28fca3d26e5e989792f80fda6.js:9:67387)
    at Uu (https://content.powerapps.com/resource/uci-infra-bus/scripts/vendor.1cae5aa28fca3d26e5e989792f80fda6.js:9:114545)
    at El (https://content.powerapps.com/resource/uci-infra-bus/scripts/vendor.1cae5aa28fca3d26e5e989792f80fda6.js:9:98325)
    at kl (https://content.powerapps.com/resource/uci-infra-bus/scripts/vendor.1cae5aa28fca3d26e5e989792f80fda6.js:9:98253)
    at xl (https://content.powerapps.com/resource/uci-infra-bus/scripts/vendor.1cae5aa28fca3d26e5e989792f80fda6.js:9:98116)

Activity Id: 7c3c6bc5-e09f-41cb-9c81-27500f2585d8

注意：我使用了这个 react azure 地图包装器

reactjs azure-maps
1个回答
0
投票

当渲染组件或访问未正确初始化的属性出现问题时，错误 

Cannot read properties of undefined (reading 'getCurrentStack')
通常会出现在 React 应用程序中。

要使用 

PopupTemplate
类在 Azure Maps 上包含图钉详细信息的弹出窗口，您可以按照以下步骤操作：

定义一个 

PopupTemplate
，指定您希望如何使用 
azure-maps-control
构建弹出内容。

const popupTemplate = new atlas.PopupTemplate({
  title: '<b>{title}</b>',
  content: `
    <p><b>Description:</b> {description}</p>
    <p><b>Category:</b> {category}</p>
  `,
  singleDescription: false, 
  textColor: '#333', 
  fillColor: '#fff', 
  detectHyperlinks: true
});

请参阅此 MSDOC 了解 

PopupTemplate
package
的 azure-maps-control 类。

使用 

AzureMapHtmlMarker
 创建或更新您的 
PopupTemplate 组件以包含弹出功能，并更新您的 
AzureMapPopup
 组件以处理弹出窗口可见性和内容。


    

  • 将这些组件集成到您的应用程序中，您可以在其中渲染 Azure 地图并放置标记。
    • 




const MyAzureMapComponent = ({ map }: { map: MapType }) => {
  return (
    <>
      <AzureMapHtmlMarker
        markerContent={<div>Marker Content</div>}
       // options={{  }} with respective you used
        events={[
          {
            eventName: 'click',
            callback: () => {
              // Handle marker click to show popup
              // Example: set state to show popup
            }
          }
        ]}
        isPopupVisible={true} // Example: pass visibility state
      />
      <AzureMapPopup
        isVisible={true} // Example: pass visibility state
        popupContent={<div>Popup Content</div>}
      //  options={{ }} with respective you used
        events={[
          {
            eventName: 'close',
            callback: () => {
              // Handle popup close event
              // Example: set state to hide popup
            }
          }
        ]}
      />
    </>
  );
};



enter image description here
react-azure-maps中的popup
和控制组件请参考这个
git

    

    

    


  

  

    
最新问题


  





  

    © www.soinside.com 2019 - 2024. All rights reserved.