OpenLayers SetCenter +缩放

如何解决OpenLayers SetCenter +缩放

我正在尝试将Google地图替换为openlayers。对我来说是新的。我将其与Jquery一起使用。

在我的dom中有数组位置：

var locations = [
     ['Name',40.383089062,49.863707274,'Address','phone','branch'],....etc
];

我的带有解析标记的初始化脚本：

var map;
var sprintersLayer;
var Popup;
//Marker settings (icon,size,and etc.)
var defaultStyleMap = {
    externalGraphic: "/img/marker2.png",graphicOpacity: 1.0,graphicWidth: 27,graphicHeight: 40,graphicYOffset: -40,graphicZIndex: 99
};

function init() {
    sprintersLayer = new OpenLayers.Layer.Vector("Sprinters",{
        styleMap: new OpenLayers.StyleMap(defaultStyleMap)
    });
    
    
    map = new OpenLayers.Map({
        div: "map_canvas",projection: new OpenLayers.Projection("EPSG:900913"),units: "m",restrictedExtent: new OpenLayers.Bounds(4400000,4600000,5700000,5500000)
    });
    map.displayProjection = new OpenLayers.Projection("EPSG:4326");

    var gomapLayer = new OpenLayers.Layer.OSM("GoMap.Az","https://maps.gomap.az/info/xyz.do?lng=az&x=${x}&y=${y}&z=${z}&f=jpg",{ 
        'buffer': 0,attribution: "(c) GoMap",tileOptions: { crossOriginKeyword: null },transitionEffect: 'resize',zoomOffset: 7,numZoomLevels: 12,maxResolution: 1222.99245234375 
    });
    
    var googlemapLayer = new OpenLayers.Layer.Google("Google Satellite",{type: google.maps.MapTypeId.SATELLITE,MIN_ZOOM_LEVEL: 7,MAX_ZOOM_LEVEL: 18});
    
    map.addLayers([gomapLayer,googlemapLayer,sprintersLayer]);
    map.addControl(new OpenLayers.Control.LayerSwitcher());
    map.addControl(new OpenLayers.Control.TouchNavigation({
        dragPanOptions: {
            enableKinetic: true
        }
    }));
    
    click = new OpenLayers.Control.SelectFeature(
        [sprintersLayer],{
            clickout: true,toggle: false,multiple: false,hover: false,toggleKey: "ctrlKey",// ctrl key removes from selection
            multipleKey: "shiftKey" // shift key adds to selection
        }
    );
    
    map.addControl(click);
    
    sprintersLayer.events.on({
        "featureselected": function(e) {
            //alert('selected');
            click.unselectAll();
            map.panTo(e.feature.lonlat);
            showPopup(e.feature);
        },"featureunselected": function(e) {
        }
    });
    
    click.activate(); 
    map.setCenter(new OpenLayers.LonLat(49.882222,40.395278).transform(
        new OpenLayers.Projection("EPSG:4326"),map.getProjectionObject()
    ),0);
    
    loadMarkers();
}


function loadMarkers(map,locations,tpl){
    var i=0;
    $.each(locations,function () {
        
        var name = locations[i][0]
        var lat = locations[i][1]

        var lon = locations[i][2]
        var info = locations[i][3]
        var di = locations[i][4]
        
        var lonlat = new OpenLayers.LonLat(lon,lat).transform(
            new OpenLayers.Projection("EPSG:4326"),map.getProjectionObject()
        );

        var flag = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(Math.floor(lonlat.lon),Math.floor(lonlat.lat)),{ description: 'flag' },defaultStyleMap);
        flag.fid = i++;
        flag.x = lonlat.lon;
        flag.y = lonlat.lat;
        flag.lonlat = lonlat;
        flag.nm = name;
        flag.info = info;
        sprintersLayer.addFeatures(flag);
    
    });
    mapShowArea();
}

function mapShowArea(){
    var features = sprintersLayer.features;
    if (features.length > 1){
        var k=0;
        for(var j=0; j<features.length; j++) {
        var feature = features[j];
            k++;
            if (k==1){
                xmin = feature.x;
                ymin = feature.y;
                xmax = feature.x;
                ymax = feature.y;
            }
        
            if (feature.x < xmin) xmin = feature.x;
            if (feature.x > xmax) xmax = feature.x;
            if (feature.y < ymin) ymin = feature.y;
            if (feature.y > ymax) ymax = feature.y;
        
        }
        var bounds = new OpenLayers.Bounds();
        bounds.extend(new OpenLayers.LonLat(xmin,ymin));
        bounds.extend(new OpenLayers.LonLat(xmax,ymax));
        map.zoomToExtent(bounds);
    }else if (features.length == 1){
        var feature = sprintersLayer.features[0];
        var lonlat = new OpenLayers.LonLat(feature.x,feature.y);
        map.setCenter(lonlat,11);      
    }
}

function showPopup (flag) {
    if (Popup == undefined) {
        Popup = new OpenLayers.Popup.FramedCloud("Info",map.getCenter(),new OpenLayers.Size(300,200),flag.info,null,true,null);
        
        Popup.autoSize = true;
        Popup.fixedRelativePosition = true;
        PopuprelativePosition = "br";
        Popup.panMapIfOutOfView = true;
        map.addPopup(Popup);
    }
    
    Popup.hide();
    
    if (flag.lonlat) {
        Popup.lonlat = flag.lonlat;
        Popup.updatePosition();
    }
    
    Popup.setContentHTML(flag.info);
    Popup.updateSize();
    Popup.show();
}

这一切都很好，但是我不知道如何专注于特定的引脚。我所有的图钉都有办公室列表形式的单独按钮，如下所示：

<a class="bl_l_item" data-id="0" data-sort="branch" href="javascript:void(0)">
    Office name
<div class="map-desc mg-t-10">
    <p> Address here </p>
    <p> Phone Here </p>
</div>
</a>

data-id是数组位置中的位置。

if($(".map").length>0){
    init();
    $(document).on('click','.bl_l_item',function(e) {
        var i = parseInt($(this).attr("data-id"));
        map.setCenter(new OpenLayers.LonLat(locations[i][1],locations[i][2]).transform(
            new OpenLayers.Projection("EPSG:4326"),map.getProjectionObject()
        ),0);
        //google.maps.event.trigger(markers[i],'click'); ---- my old google maps function
    })
}

这似乎可行，但我无法将地图缩放到特定的图钉。单击并尝试居中视图后，setCenter会刷新地图。