當onClick單選按鈕時，更改特定地標的顏色

Question

使用OpenLayers，我有一個包含10個以上地標的KML文件。我想要做的是，當我點擊單選按鈕時，特定的地標會改變它的顏色。

有人知道該怎麼做嗎？

謝謝。

編輯：

所以這是我到目前爲止有：

function init(){ 

     /////////////////////////////////////////////// 
        CONTROLS AND MAP STUFF 
     //////////////////////////////////////////////  


     var myvector = new OpenLayers.Layer.Vector("myvector", { 

      projection: map.displayProjection, 
      styleMap: new OpenLayers.StyleMap(
       { 'default': 
        { 
        strokeColor: "#777777", 
        strokeOpacity: 1, 
        strokeWidth: "2", 
        fillColor: "#FFF900", 
        fillOpacity: 1, 
        pointRadius: 8, 
        pointerEvents: "visiblePainted",       
        graphicName: "circle", 
       } 
      }), 
      strategies: [new OpenLayers.Strategy.Fixed()], 
      protocol: new OpenLayers.Protocol.HTTP({ 
       url: url_time, 
       format: new OpenLayers.Format.KML({ 
        extractStyles: false, 
        extractAttributes: true 
       }) 
      }) 
     }); 


     map.addLayers([wms, wms2, myvector]); 


     select = new OpenLayers.Control.SelectFeature(myvector); 

     myvector.events.on({ 
      "featureselected": onFeatureSelect, 
      "featureunselected": onFeatureUnselect 
     });    
     map.addControl(select); 
     select.activate(); 
     map.zoomToExtent(new OpenLayers.Bounds(-53,-21,13,22)); 
    } 

    function switchLabels() { 

     /////// PROBABLY HERE IS THE PLACE TO DO THE TRICK //////// 

     myvector.redraw(); 

    } 

     /////////////////////////////////////////////// 
         SOME OTHER THINGS 
     ////////////////////////////////////////////// 

而且radion按鈕：

<input name="button1" type="radio" value="button1" onClick="switchLabels()"> 

Here是本switchLabels一個職位，但我不知道如何更改由一個地標創建的點。

謝謝。

Answer 1

好的。我放棄了使用KML來做我想做的事。對於那些誰需要改變載體的一些屬性中的OpenLayers，在這裏不用一個可能的解決方案：

var features = []; 
     features[0] = new OpenLayers.Feature.Vector(
      new OpenLayers.Geometry.Point(10,10), 
      { 
      name : "Hello", 
      body : "world", 
      }, {strokeColor: "#777777",strokeOpacity: 1,strokeWidth: "2",fillColor: "#FFF900",fillOpacity: 1,pointRadius: 8,pointerEvents: "visiblePainted",graphicName: "circle"}); 
     features[1] = new OpenLayers.Feature.Vector(
      new OpenLayers.Geometry.Point(15,10), 
      { 
      name : "Hello", 
      body : "Mars", 
      }, {strokeColor: "#777777",strokeOpacity: 1,strokeWidth: "2",fillColor: "#FFF900",fillOpacity: 1,pointRadius: 8,pointerEvents: "visiblePainted",graphicName: "circle"}); 

    ///////////// POPUPS ////////////// 

vector = new OpenLayers.Layer.Vector("LAYER",{ 
    eventListeners:{ 
     'featureselected':function(evt){ 
      var feature = evt.feature; 
      var popup = new OpenLayers.Popup.FramedCloud("popup", 
       OpenLayers.LonLat.fromString(feature.geometry.toShortString()), 
       new OpenLayers.Size(350,350), 
       feature.attributes.name + feature.attributes.body, 
           null, false, onPopupClose 
      ); 
    popup.maxSize = new OpenLayers.Size(350, 350); 
     popup.minSize = new OpenLayers.Size(350, 350); 
      feature.popup = popup; 
      map.addPopup(popup); 
     }, 
     'featureunselected':function(evt){ 
      var feature = evt.feature; 
      map.removePopup(feature.popup); 
      feature.popup.destroy(); 
      feature.popup = null; 
     } 
    } 
}); 

function onPopupClose(evt) { 
     select.unselectAll(); 
    } 

vector.addFeatures(features); 

// create the select feature control 
var selector = new OpenLayers.Control.SelectFeature(vector,{ 
    click:true, 
    autoActivate:true 
}); 


map.addLayers([vector]); 
map.addControl(selector); 
map.zoomToExtent(new OpenLayers.Bounds(-53,-21,13,22));   
} 

///////////////////// FUNCTION TO CHANGE THE VECTOR STYLE /////////// 
function switchColors(p_ind,p_id) { 
    if (eval('document.form.' + p_id).checked == 1){ 
    vector.features[p_ind].style = { 
       strokeColor: "#777777", 
        strokeOpacity: 1, 
        strokeWidth: "2", 
        fillColor: "#FF0000", 
        fillOpacity: 1, 
        pointRadius: 8, 
        pointerEvents: "visiblePainted",       
        graphicName: "circle" 
    }; 
    } 
    else { 
    vector.features[p_ind].style = { 
      strokeColor: "#777777", 
      strokeOpacity: 1, 
      strokeWidth: "2", 
      fillColor: "#FFF900", 
      fillOpacity: 1, 
      pointRadius: 8, 
      pointerEvents: "visiblePainted",       
      graphicName: "circle" 
     }; 
    } 
    vector.redraw(); 
} 

然後無線電：

<form name="form" method="post" action="action.php"> 
<input name="p1" type="checkbox" value="p1" onClick="switchColors(0,'p1');"> 
<input name="p2" type="checkbox" value="p2" onClick="switchColors(1,'p2');"> 
</form>