Here Maps - 防止地图显示地图外的灰色区域

如何解决Here Maps - 防止地图显示地图外的灰色区域

因此，我无法在 Here Maps API 上的任何地方找到防止地图显示在地图外呈现的灰色区域的选项。

You can visualize the grey area by dragging，or by zooming out。

至少可以说，这让地图感觉有点业余。

到目前为止，我已经查看了整个文档，但找不到任何内容，我也尝试通过使用限制平移行为 map.getviewmodel().addEventListener('sync',... 来阻止它，但它没有按预期工作。

解决方法

在快速缩小期间看到的灰色区域是因为从服务器通过 Internet 连接访问图块图像需要时间。 然而，在最大缩小时看到的灰色图像可以通过将地图视图限制在由其左上角和右下角的地理坐标定义的特定矩形地理区域内进行管理。

方法名称：

new H.geo.Rect (top,left,bottom,right)

API 参考： https://developer.here.com/documentation/maps/3.1.26.0/api_reference/H.geo.Rect.html

代码片段：

function restrictMap(map){

  var bounds = new H.geo.Rect(37.829,-122.426,37.824,-122.42);
  var prevGoodBounds;

  map.getViewModel().addEventListener('sync',function(e) {
            var curZoom = e.newValue.zoom,newZoom = false,mapViewBounds = map.getViewModel().getLookAtData().bounds.getBoundingBox(),topMap = mapViewBounds.getTop(),bottomMap = mapViewBounds.getBottom();
        //console.log("prevGoodBounds:",prevGoodBounds);
                
            
            //if(curZoom > this.opt.maxZoom || curZoom < this.opt.minZoom){
                //console.log("sync curZoom > this.opt.maxZoom || curZoom < this.opt.minZoom",this.opt);
                //if(curZoom > this.opt.maxZoom) newZoom = this.opt.maxZoom;
                //if(curZoom < this.opt.minZoom) newZoom = this.opt.minZoom;

                //var runLater = function(newZoom){
                    //map.setZoom(newZoom);
                //};
                //runLater.delay(50,this,newZoom);
            //}
            
            
            if(topMap > 85 || bottomMap < -85) {
                //console.log("sync topMap > 83 || bottomMap < -83",topMap,bottomMap,this.opt);
                
                if(prevGoodBounds){
                    //var runLater = function(){
                        map.setZoom(prevGoodBounds.zoom);
                        map.setCenter(prevGoodBounds.center);
                    //};
                    //runLater.delay(0,this);
                }
            }
            
            if(topMap <= 85 && bottomMap >= -85) {
                prevGoodBounds = {center: map.getCenter(),zoom: map.getZoom()};
            }
        });

  //Debug code to visualize where your restriction is
  /*map.addObject(new H.map.Rect(bounds,{
    style: {
        fillColor: 'rgba(55,85,170,0.1)',strokeColor: 'rgba(55,0.6)',lineWidth: 8
      }
    }
  ));*/
}

完整示例：https://jsfiddle.net/raj0665/8oLyfent/