此处的Javascript地图库没有渲染

背景：我正在一个较大的网页中构建一个小地图组件，该网页反应显示一个位置周围的区域。此处的Javascript地图库没有渲染

问题：我遇到了一个问题，下面的组件会检索它需要的磁贴（我可以在网络使用中看到它），创建组件，然后在270x0中渲染地图，使其不可见。以下是我用于组件的代码。

我已经尝试过：如果手动将组件尺寸调整为270x250，我可以看到背景UI和行为正常工作并进行适当渲染。我已确认库拉的瓷砖与要求的区域相关，并且我的钥匙工作正常。我也尝试过（简单地）将地图渲染作为脚本导入到反应并运行它，但是效果并不理想，我真的不希望以这种方式解决问题。

仅供参考，我正在使用this tutorial here，我正在适应做出反应。

var Map = React.createClass({ 
    propTypes: { 
     target: React.PropTypes.string.isRequired 
    }, 

    componentDidMount: function() { 
     var platform = new H.service.Platform({ 
         app_id: keys.app_id, 
         app_code: keys.app_code, 
         useCIT: true, 
         useHTTPS: true 
         }); 

     var defaultLayers = platform.createDefaultLayers(); 
     var map = new H.Map(document.getElementById('map'), 
          defaultLayers.normal.map,{ 
          center: {lat:this.props.target.lat, 
            lng:this.props.target.long}, 
          zoom: 13 
          }); 

     var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map)); 
     var ui = H.ui.UI.createDefault(map, defaultLayers); 
    }, 

    render: function() { 
     return (
     <div> 
      <p>Location</p> 
      <div id="map" styles="position:absolute; width:49%; height:100%; background:grey"/> 
     </div> 
    ); 
    } 
    });

谢谢！

更新：当我手动重新调整这里的API地图容器的画布（从原始大小为270x1）时，我可以获得显示的第一排瓷砖。我的直觉只是显示最高的那个，因为它最初只有一个像素高。

来源

2017-07-24 aeusman

我能够解决这个问题，通过设置高度像素和默认位置 - 静态。

<div id="map" styles="width:500px; height:100%; background:grey"/>

来源

2018-01-22 15:44:34

此处的Javascript地图库没有渲染

回答

相关问题