在openstreet地图openlayers上突出显示/跳出标记

Question

我有一个页面，我在底部有一个表格，页面顶部有一张地图。 不同的表行映射到地图上的不同标记。 我需要通过在行选择上的openstreet地图上弹跳来强调标记。我需要一些帮助才能弄清楚需要做些什么。在列上我写了一个方法highlightMarkerById（rid），它应该在地图上突出显示标记。 还有一个问题是，在我选择一个列并且方法highlightMarkerById（rid）被执行后，我无法在地图中放大/缩小/移动。

这是标记：

<apex:page showHeader="false" sidebar="false" controller="Controller">    
    <!-- script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false" -->
    <!-- script src="http://www.openlayers.org/api/OpenLayers.js" -->

    <!-- include Resources -->  

    <apex:includeScript value="/support/console/33.0/integration.js"/>
    <apex:includeScript value="{!$Resource.jQuery}"/>
    <apex:includeScript value="{!$Resource.OpenLayers}"/>    
    <apex:includeScript value="{!$Resource.HomePageJS_OS}"/>    

    <apex:stylesheet value="{!$Resource.HomepageCSS}"/>

    <!-- hidden text to store data as JSON -->
    <apex:outputText value="{!allDeviceDataAsJson}" styleClass="allDeviceDataAsJson" id="allDeviceDataAsJson" style="display:none"></apex:outputText>

    <apex:outputPanel layout="block" styleClass="container">        
        <!-- map canvas -->
        <apex:outputPanel layout="block" styleClass="theMap">
            <div id="map-canvas"></div>
        </apex:outputPanel>


        <div class="10px"></div>
        <!-- data table -->

        <div class="bottom">
            <apex:pageBlock mode="maindetail">
                <apex:pageBlockTable value="{!iotDevices}" var="device" id="deviceTable" rowClasses="odd,even" styleClass="relativePosition">
                    <apex:column onclick="highlightMarkerById('{!device.Id}')" styleClass="{!device.Id}">
                        <apex:facet name="header">Name</apex:facet>
                        <apex:outputLink value="#" id="deviceDetailTab_1">{!device.Name}</apex:outputLink>
                    </apex:column>
                    <apex:column onclick="highlightMarkerById('{!device.Id}')" styleClass="{!device.Id}">
                        <apex:facet name="header">Serial Number</apex:facet>
                        <apex:outputText value="{!device.Serial_Number__c}" escape="false"/>
                    </apex:column>
                    <apex:column onclick="highlightMarkerById('{!device.Id}')" styleClass="{!device.Id}">
                        <apex:facet name="header">Module Status</apex:facet>
                        <apex:outputText value="{!device.Last_Device_Status_Symbol__c}" escape="false"/>
                    </apex:column>
                    <apex:column onclick="highlightMarkerById('{!device.Id}')" styleClass="{!device.Id}">
                        <apex:facet name="header">Temperature</apex:facet>
                        <apex:outputText value="{!device.Temperature_Icon__c}" escape="false"/>
                    </apex:column>
                    <apex:column onclick="highlightMarkerById('{!device.Id}')" styleClass="{!device.Id}">
                        <apex:facet name="header">Humidity</apex:facet>
                        <apex:outputText value="{!device.Humidity_icon__c}" escape="false"/>
                    </apex:column>
                    <apex:column onclick="highlightMarkerById('{!device.Id}')" styleClass="{!device.Id}">
                        <apex:facet name="header">Battery</apex:facet>
                        <apex:outputText value="{!device.Battery_Icon__c}" escape="false"/>
                    </apex:column>
                    <apex:column onclick="highlightMarkerById('{!device.Id}')" styleClass="{!device.Id}">
                        <apex:facet name="header">Signal Strength</apex:facet>
                        <apex:outputText value="{!device.Signal_Strength_Icon__c}" escape="false"/>
                    </apex:column>
                </apex:pageBlockTable>
            </apex:pageBlock>
        </div>

    </apex:outputPanel>
</apex:page>

这是javascript：

$j = jQuery.noConflict();

var timeout = null;

var homeMap;
var marker;
var markerArray = [];
var myDevices;
var map;
var vectorLayer;

$j(document).ready(function(){

    myDevices = JSON.parse($j('.allDeviceDataAsJson').text());   

    //humidities = JSON.parse('{!allHumidityDataAsJson}');      
    //alert('---inside ready----');
    map = new OpenLayers.Map("map-canvas");
    map.addLayer(new OpenLayers.Layer.OSM());

    epsg4326 =  new OpenLayers.Projection("EPSG:4326"); //WGS 1984 projection
    //projectTo = map.getProjectionObject(); //The map projection (Spherical Mercator)
    projectTo = new OpenLayers.Projection("EPSG:900913");

    var lonLat = new OpenLayers.LonLat(11.689991 ,48.137755).transform(epsg4326, projectTo);    
    var zoom=3;

    //var lonLat = new OpenLayers.LonLat( -0.1279688 ,51.5077286).transform(epsg4326, projectTo); 
    //var zoom=16;    

    vectorLayer = new OpenLayers.Layer.Vector("Overlay");  
    //alert('----myDevices.length----'+myDevices.length);

            for (i = 0; i < myDevices.length; i++) {
            if (myDevices[i].lat != 0 && myDevices[i].lng != 0) {

                var feature = new OpenLayers.Feature.Vector(
                        new OpenLayers.Geometry.Point(myDevices[i].lng, myDevices[i].lat).transform(epsg4326, projectTo),
                        {description : myDevices[i].id},
                        {externalGraphic: '/resource/1435319944000/box_icon', graphicHeight: 25, graphicWidth: 21, graphicXOffset:-12, graphicYOffset:-25}
                        );

                markerArray[i] = feature;
                vectorLayer.addFeatures(feature);

                }
            }

    map.addLayer(vectorLayer);
    map.setCenter (lonLat, zoom);
    });


//highlight marker when table row is clicked
function highlightMarkerById(rid) {
    //alert('----markerArray.length----'+markerArray.length + '-----device id passed is-----' + rid);
    var selectFeature = new OpenLayers.Control.SelectFeature(vectorLayer);
    //selectFeature.activate();
    epsg4326 =  new OpenLayers.Projection("EPSG:4326");
    projectTo = new OpenLayers.Projection("EPSG:900913");
    for (var i = 0; i < vectorLayer.features.length; i++) {
        //alert('value of description attribute '+vectorLayer.features[i].attributes.description);
        if(vectorLayer.features[i].attributes.description == rid) {

                var selectControl = new OpenLayers.Control.SelectFeature(
                    vectorLayer.features[i],
                    {
                        hover: true,
                        highlightOnly: true
                    });

                map.addControl(selectControl);
                selectControl.activate();

            //selectFeature.select(vectorLayer.features[i]);
            /*var lonlat = new OpenLayers.LonLat(myDevices[i].lng, myDevices[i].lat).transform(epsg4326, projectTo);
            map.panTo(lonlat);
            map.zoomTo(3);*/
        }
    }
    alert('---features length---'+vectorLayer.features.length);
}

// open new primary tab
function openPrimaryTab(Id, Title){
    //Open a new primary tab with the salesforce.com home page in it
    sforce.console.openPrimaryTab(null, '/' + Id, true, Title, openSuccess, Title);
}

var openSuccess = function openSuccess(result) {
    //Report whether opening the new tab was successful
    if (result.success == true) {
        //open...
    } else {
        //alert('Primary tab cannot be opened');
    }
};

// check if current Document is Active... if yes rerender GMAP
var checkActive = function() {
    var isActive = window.document.hasFocus();
    timeout = setTimeout(checkActive, 3000);
    window.console.log(isActive);
}