HERE Maps JS API 控制在地图后面渲染

Question

我正在尝试将 UI 控件（缩放 in/out 和缩放）添加到 HERE 地图，我看到缩放图标渲染的 svg，然后地图渲染在svg。想知道是否有人可以帮助我发现问题。查看文档 (https://developer.here.com/documentation/maps/3.1.22.0/api_reference/H.ui.UI.html) 我认为 H.ui.UI.createDefault(hereMap, layers) 将在地图上呈现缩放控件。

代码

class HereMap extends Component {
  constructor(props) {
    super(props);
    this.mapRef = React.createRef();
    this.map = null;
  }

  state = {
    lat: this.props.lat,
    lng: this.props.lng,
    zoom: this.props.zoom,
  };

  componentDidMount() {
    if (!this.map) {
      const platform = new H.service.Platform({
        apikey: 'my_api_key',
      });
      const layers = platform.createDefaultLayers();
      this.layers = layers;
      const hereMap = new H.Map(this.mapRef.current, layers.vector.normal.map, {
        pixelRation: window.devicePixelRatio,
        center: {lat: this.state.lat, lng: this.state.lng},
        zoom: this.props.zoom,
      });

      hereMap.addEventListener('mapviewchange', this.handleMapViewChange);
      new H.mapevents.Behavior(new H.mapevents.MapEvents(hereMap));
          
      // This is where I thought the zoom controls would get attached to the map
      H.ui.UI.createDefault(hereMap, layers);

      this.map = hereMap;
    }
  }

  componentWillUnmount() {
    // Cleanup after the map to avoid memory leaks when this component exits the page
    if (this.map) {
      this.map.dispose();
    }
  }

  handleMapViewChange = (zoom, lat, lng) => {
    this.setState({
      lat,
      lng,
      zoom,
    });
  };

  render() {
    return (
      <>
        <div ref={this.mapRef} style={{height: '500px', width: '300px'}} />
      </>
    );
  }
}

export default HereMap;

Answer 1

您是否在标签中添加了 UI 库和 css 文件？

<script src="https://js.api.here.com/v3/3.1/mapsjs-ui.js" type="text/javascript" charset="utf-8"></script>

<link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />

HERE Maps JS API 控制在地图后面渲染

HERE Maps JS API controls rending behind map

javascript

here-api

reactjs

heremaps