4

我正在为我的网站实施 HERE 地图并在其上绘制许多标记。第一个标记很大，其余的很小。如果用户将鼠标悬停在特定位置，则会弹出大标记。现在，如果我的位置在同一个城市或国家，那很好，但如果全球有 150 多个位置，地图将水平伸展并显示每个位置。我需要的是，如果城市和国家都在那里，那么一切都很好，但如果是全局的，那么地图应该放大到第一个位置并随着用户悬停到具有相同缩放值的下一个位置而移动。

我的代码：

function loadHeremap(element){
    var platform = new H.service.Platform({
        'apikey': 'MyAPIKEY',
        useHTTPS: true
    });
    var pixelRatio = window.devicePixelRatio || 1;
    var defaultLayers = platform.createDefaultLayers({
      tileSize: pixelRatio === 1 ? 256 : 512,
      ppi: pixelRatio === 1 ? undefined : 320
    });
    
    var city_latitude = $('#latitude').text();
    var city_longitude = $('#longitude').text();
    
    var map = new H.Map(document.getElementById(element),
      defaultLayers.normal.map,{
      center: {lat: city_latitude, lng: city_longitude},
      zoom: 7,
      pixelRatio:pixelRatio
    });
    
    window.addEventListener('resize', function () { map.getViewPort().resize();});
      
    var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
    var behavior    = behavior.disable(H.mapevents.Behavior.WHEELZOOM);

    var ui = H.ui.UI.createDefault(map, defaultLayers);
    
    var mapSettings = ui.getControl('mapsettings');
    mapSettings.setVisibility(false);
    var zoom = ui.getControl('zoom');   
    zoom.setAlignment('right-bottom');  
    
    allMarkers = [];    
    var event_latlon_map = $('.coll_event_data').text();        
    event_latlon_map=JSON.parse(event_latlon_map);
    var locations = event_latlon_map;
    
    var group = new H.map.Group();
    var marker, i;
    var icon  = new H.map.Icon('../images/dark_blue_circle.png');
    var BigIcon = new H.map.Icon('../images/dark_blue_large.png');
    for (i = 0; i < locations.length; i++) {
        group.addEventListener('pointerdown', function (evt) {
            var bubble =  new H.ui.InfoBubble(evt.target.getGeometry(), {
                content: evt.target.getData()
            });
            
            var position = evt.target.getGeometry(),
                data = evt.target.getData(),
                bubbleContent = evt.target.getData(),
                bubble = onMarkerClick.bubble;
              
            if (!bubble) {
                bubble = new H.ui.InfoBubble(position, {
                    content: bubbleContent
                });  
                ui.addBubble(bubble);
                onMarkerClick.bubble = bubble;
            } else {
                bubble.setPosition(position);
                bubble.setContent(bubbleContent);
                bubble.open();
            }
            checkInfoBubble(bubble,map);
        }, false);
        group.addEventListener('pointermove', function (evt) {
            var bubble =  new H.ui.InfoBubble(evt.target.getGeometry(), {
            // read custom data
            content: evt.target.getData()
        });
        var bubble_state=bubble.getState();
        var position = evt.target.getGeometry(),
            data = evt.target.getData(),
            bubbleContent = evt.target.getData(),
            bubble = onMarkerClick.bubble;
          
            if (!bubble) {
                bubble = new H.ui.InfoBubble(position, {
                    content: bubbleContent
                });
                ui.addBubble(bubble);
                onMarkerClick.bubble = bubble;
            } else {
                bubble.setPosition(position);
                bubble.setContent(bubbleContent);
                bubble.open();
            }
            checkInfoBubble(bubble,map);
        }, false);
        
        var loc_event_id    = locations[i][3];
        var loc_event_name  = locations[i][0];
        var loc_venue_name  = locations[i][4];
        var loc_event_url         = locations[i][7];
        
        var full_detail = '<div data-id="'+id+'" class="detail"><a href="'+url+'"><div class="marker">'+name+'</div></a><div class="label">Venue: </div><div class="name">'+name1+'</div></div>';

        // Add the first marker
        if(i==0){
            marker = new H.map.Marker({lat:locations[i][1], lng:locations[i][2]},{icon: BigIcon });
        }else{
            marker = new H.map.Marker({lat:locations[i][1], lng:locations[i][2]},{icon: icon });
        }
        marker.setData(full_detail);
        group.addObject(marker);
        allMarkers.push(marker);
        map.addObject(group);     
    }
    map.getViewPort().setPadding(50, 50, 50, 50);
    map.setViewBounds(group.getBounds());
}
4

1 回答 1

1

首先，将变量 map 定义为 global，然后让这个函数初始化 map。

1：因为这条线，map.setViewBounds(group.getBounds())你的地图越来越小。您要求地图缩小并专注于地图上的每个标记。正如您所提到的，要解决这个问题，请将其置于以下条件下；如果地图是全球地图，则使用该map.setCenter方法通过传递纬度和经度来使您想要的标记居中。然后map.setZoom根据你的要求。

if(map == "global"){
  map.setCenter({lat:latitude,lng:longitude});
  map.setZoom(5);
}else{
  map.getViewPort().setPadding(50, 50, 50, 50);
  map.setViewBounds(group.getBounds())
}

2：要移动地图，你可以再次使用用户map.setCenter方法。当您将鼠标悬停在元素上时，只需将 lat 和 lon 传递给标记并使用该方法。这会将地图跳转到给定的位置。

$(document).on("hover","#element",function(){
   map.setCenter({lat:latitude,lng:longitude});
   map.setZoom(5);
});
于 2020-07-16T05:08:21.623 回答