Javascript OpenLayers设置中心&x2B；快速移动

我正在尝试用openlayers替换google地图。这对我来说是新鲜事。我将它与Jquery一起使用

在我的dom中具有数组位置：

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

带有解析标记的My Int脚本：

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();
}

---

这似乎可行，但我无法让地图在特定的图钉上缩放。单击并尝试居中查看后，设置中心刷新地图。

如果您要用OpenLayers替换google地图，您选择非常过时的OpenLayers 2有什么原因吗？最新的ist OpenLayers 6.4.3。如果您不想使用绑定器，请参见此处的快速入门：可以通过单击侦听器对pin进行缩放，类似于此示例：

<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>

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
    })
}