我正在使用演示代码使用React+Typescript构建一个简单的Here映射。我在11号线收到一个TypeError: Cannot read properties of undefined (reading 'Platform')：
8 | React.useLayoutEffect(() => {
9 | if(!mapRef.current) return;
10 |
> 11 | const platform = new H.service.Platform({
12 | ^ apikey: // my API key
13 | });
14 |
下面是打字脚本文件的开头：
import React from "react";
import * as H from "here-maps";
export function DisplayMap() {
const mapRef = React.useRef(null);
React.useLayoutEffect(() => {
if(!mapRef.current) return;
const platform = new H.service.Platform({
apikey: // my API key
});
const defaultLayers = platform.createDefaultLayers();
...
知道问题出在哪里吗？我检查了H.service，它是一个名称空间，里面定义了Platform。不知道为什么它是未定义的！
这是我的package.json文件：
...
"dependencies": {
"@types/heremaps": "^3.1.5",
"ajv": "^6.12.0",
"here-maps": "^3.0.2",
"react": "^16.13.0",
"react-dom": "^16.13.0"
},
"devDependencies": {
"@types/jest": "^24.9.1",
"@types/node": "^12.12.6",
"@types/react": "^16.9.23",
"@types/react-dom": "^16.9.5",
"react-scripts": "3.4.0",
"typescript": "^3.7.5"
},
...
我们可以将映射集成到我们的React组件中。也就是说，我们需要对说明进行一些温和的调整，以适应React的工作方式，所以让我们循序渐进。
加载API代码库正如快速入门指南中提到的，我们需要加载核心模块和服务模块。这些脚本标记仍然被添加到文档的头部，与那里的指南相同，但我们将把它们放在/public/index.html文件中。我们还可以添加元标签来优化移动设备的性能，同时：
<head>
...
<title>React App</title>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<script
type="text/javascript"
src="https://js.api.here.com/v3/3.1/mapsjs-core.js"
></script>
<script
type="text/javascript"
src="https://js.api.here.com/v3/3.1/mapsjs-service.js"
></script>
</head>创建可重复使用的Map组件现在我们已经加载了HERE地图库，让我们通过创建src/DisplayMapClass.js文件来创建一个可重用的地图组件，并添加以下代码：
// src/DisplayMapClass.js
import * as React from 'react';
export class DisplayMapClass extends React.Component {
mapRef = React.createRef();
state = {
// The map instance to use during cleanup
map: null
};
componentDidMount() {
const H = window.H;
const platform = new H.service.Platform({
apikey: "{HERE-API-KEY}"
});
const defaultLayers = platform.createDefaultLayers();
// Create an instance of the map
const map = new H.Map(
this.mapRef.current,
defaultLayers.vector.normal.map,
{
// This map is centered over Europe
center: { lat: 50, lng: 5 },
zoom: 4,
pixelRatio: window.devicePixelRatio || 1
}
);
this.setState({ map });
}
componentWillUnmount() {
// Cleanup after the map to avoid memory leaks when this component exits the page
this.state.map.dispose();
}
render() {
return (
// Set a height on the map so it will display
<div ref={this.mapRef} style={{ height: "500px" }} />
);
}
}现在，让我们在App.js中导入DisplayMapClass.js组件来渲染地图。
//App.js
import React from 'react';
import {DisplayMapClass} from './DisplayMapClass';
function App() {
return (
<DisplayMapClass />
);
}
export default App;添加交互性虽然之前的地图可能足以满足您的业务需求，但许多应用程序都需要交互性。幸运的是，JS SDK为我们提供了简单地添加此功能的方法。
首先，我们将在public/index.html文件中添加两个新的导入，以从HERE SDK导入相关功能所需的文件：
<head>
...
<title>React App</title>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<script
type="text/javascript"
src="https://js.api.here.com/v3/3.1/mapsjs-core.js"
></script>
<script
type="text/javascript"
src="https://js.api.here.com/v3/3.1/mapsjs-service.js"
></script>
<script
type="text/javascript"
src="https://js.api.here.com/v3/3.1/mapsjs-ui.js"
></script>
<script
type="text/javascript"
src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"
></script>
</head>然后，我们可以通过对已经构建的组件进行一些小的更改来使用这些导入所启用的新功能。
export default class DisplayMapClass extends React.Component {
mapRef = React.createRef();
state = {
map: null
};
componentDidMount() {
const H = window.H;
const platform = new H.service.Platform({
apikey: "{HERE-API-KEY}"
});
const defaultLayers = platform.createDefaultLayers();
const map = new H.Map(
this.mapRef.current,
defaultLayers.vector.normal.map,
{
center: { lat: 50, lng: 5 },
zoom: 4,
pixelRatio: window.devicePixelRatio || 1
}
);
// MapEvents enables the event system
// Behavior implements default interactions for pan/zoom (also on mobile touch environments)
// This variable is unused and is present for explanatory purposes
const behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
// Create the default UI components to allow the user to interact with them
// This variable is unused
const ui = H.ui.UI.createDefault(map, defaultLayers);
this.setState({ map });
}
componentWillUnmount() {
this.state.map.dispose();
}
render() {
return <div ref={this.mapRef} style={{ height: "500px" }} />;
}
}现在我们应该能够放大和缩小地图，平移到我们选择的位置，甚至为我们的用户提供一个方便的API来使用
有关更多详细信息，请查看以下教程。它解释了我们如何将react与here映射进行集成。https://developer.here.com/tutorials/react/