Question

我正在尝试使用React制作一个涉及地图的小型网络应用。我使用HERE Maps反应组件（这是不可协商的），但我无法让地图显示出来。我不确定它是否是Key或我对React的理解（这很小），导致了这个问题。

地图组件

import React from "react";
import { connect } from "react-redux";

import HEREMap from "react-here-maps";

@connect((store) => {
  return {

  };
})
export default class Map extends React.Component {
  render() {
    console.info(HEREMap);

    const style = {
      width: "100%",
      height: "100%"
    };

    return <div style={style}>
      <h1>Hello HERE</h1>
      <HEREMap
            appId="<ID>"
            appCode="<CODE>"
            center={{ lat: 51.5, lng: 0 }}
            zoom={14}
      />
    </div>
  };
};

主要

import React from "react"
import ReactDOM from "react-dom"
import { Provider } from "react-redux"

import Map from "./components/Map"
import Layout from "./components/Layout"
import store from "./store"

const app = document.getElementById('app')

ReactDOM.render(
    <Provider store={store}>
      <Map />
    </Provider>, app);

Answer 1

我在您的代码清单中注意到了这一点：

const style = {
  width: "100%",
  height: "100%"
};

一个常见的问题是，像<div>这样的块元素的高度默认为块内容的高度。通过将其指定为100％之类的百分比，它将是元素父级的高度，如果它只是一个没有内容的空容器，则其高度将为0，因此不可见。

Percentage Height HTML 5/CSS中的答案可能有助于寻找其他替代方法，例如设置body元素的高度。

由于 react-here-maps 软件包存在一些问题，因此可能还会发生其他问题，但是您说这不是可以商谈的。对于寻求其他独立演示的其他人，Use HERE Interactive Maps with ReactJS to Pick a Theme可能会有所帮助。在源示例中，高度固定为400px。

HERE Maps React Component显示为空

1 个答案: