地図上のMouseClickイベントとOpenLayersを使用して円を表示する2

Question

サークルはありますが、ページを読み込むと常に表示されます。私はmap.Itをクリックすると、このサークルが表示されます円は同じ場所に残り、移動しない場所にこだわりました。私はマップをクリックすると表示されたい誰も助けることができますか？それとも、ここ

http://jsfiddle.net/zLjae81b/18/

function updateIcon(f) { 
 
    f.style.externalGraphic = "marker.png"; 
 
    vector.drawFeature(f); 
 
} 
 

 
options = { 
 
    div: "map", 
 
    zoom: 2, 
 
    center: [0, 0], 
 
    layers: [ 
 
     new OpenLayers.Layer.OSM() 
 
    ] 
 
}; 
 
map = new OpenLayers.Map(options); 
 
vector = new OpenLayers.Layer.Vector(); 
 
map.addLayer(vector); 
 

 

 
var point1 = new OpenLayers.Geometry.Point(0,0); 
 
var point2 = new OpenLayers.Geometry.Point(1000000, 1000000); 
 
var point3 = new OpenLayers.Geometry.Point(2000000, 2000000); 
 
var radius = $("#amount").val(); 
 
var mycircle = OpenLayers.Geometry.Polygon.createRegularPolygon(point2,radius,40,0); 
 
    var featurecircle = new OpenLayers.Feature.Vector(mycircle); 
 
     
 

 

 
// var selected_polygon_style = { 
 
//  strokeWidth: 5, 
 
//  strokeColor: '#ff0000' 
 
//  // add more styling key/value pairs as your need 
 
// }; 
 

 
// featurecircle.style = selected_polygon_style; 
 

 
marker1 = new OpenLayers.Feature.Vector(point1, null, { 
 
    externalGraphic: "marker.png", 
 
    graphicWidth: 32, 
 
    graphicHeight: 32, 
 
    fillOpacity: 1 
 
}); 
 
marker1.style = { display: 'none' }; 
 

 
marker2 = new OpenLayers.Feature.Vector(point2, null, { 
 
    externalGraphic: "marker.png", 
 
    graphicWidth: 32, 
 
    graphicHeight: 32, 
 
    fillOpacity: 1 
 
}); 
 

 
marker3 = new OpenLayers.Feature.Vector(point3, null, { 
 
    externalGraphic: "marker.png", 
 
    graphicWidth: 32, 
 
    graphicHeight: 32, 
 
    fillOpacity: 1 
 
}); 
 
vector.addFeatures([marker1, marker2, marker3, featurecircle]); 
 

 

 

 
$("#slider-range-max").slider({ 
 
     range: "max", 
 
     min: 1000000, 
 
     max: 3000000, 
 
     value: 1000000, 
 
     slide: function(event, ui) { 
 
     $("#amount").val(ui.value); 
 
     radius = $("#amount").val(); 
 

 
    vector.removeFeatures([featurecircle]); 
 

 
var mycircle = OpenLayers.Geometry.Polygon.createRegularPolygon 
 
(
 
    point2, 
 
    radius, 
 
    40, 
 
    0 
 
); 
 

 

 

 

 
featurecircle = new OpenLayers.Feature.Vector(mycircle); 
 
vector.addFeatures([featurecircle]); 
 

 
     console.log(radius); 
 

 
     } 
 
    }); 
 
    $("#amount").val($("#slider-range-max").slider("value")); 
 
$(radius).val($("#slider-range-max").slider("value"));

<p> 
 
    <label for="amount">Minimum number</label> 
 
    <input type="text" id="amount" value="1000000" style="border:0; color:#f6931f; font-weight:bold;"> 
 
</p> 
 
<div id="slider-range-max"></div> 
 
<div id="map" style="width:600px;height:600px;"></div>

Answer 1

Plsの訪問私はあなたのコードは、plsはいくつかの問題を作成したフレーム以降のブラウザで実行しようと更新したフィドルを確認することができます。

http://jsfiddle.net/zLjae81b/30/

はここにあなたのコメントに基づいて更新されたコードを追加することIAM： -

function initializeMap() { 
 
    options = { 
 
     div: "map", 
 
     zoom: 2, 
 
     center: [0, 0], 
 
     layers: [ 
 
      new OpenLayers.Layer.OSM() 
 
     ] 
 
    }; 
 
    map = new OpenLayers.Map(options); 
 
    vector = new OpenLayers.Layer.Vector(); 
 
    map.addLayer(vector); 
 
    return map 
 
} 
 

 
function addClickEventHandlertoMap(map) { 
 
    OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, { 
 
     defaultHandlerOptions: { 
 
      'single': true, 
 
      'double': false, 
 
      'pixelTolerance': 0, 
 
      'stopSingle': false, 
 
      'stopDouble': false 
 
     }, 
 
     initialize: function(options) { 
 
      this.handlerOptions = OpenLayers.Util.extend({}, this.defaultHandlerOptions); 
 
      OpenLayers.Control.prototype.initialize.apply(
 
       this, arguments 
 
      ); 
 
      this.handler = new OpenLayers.Handler.Click(
 
       this, { 
 
        'click': this.trigger 
 
       }, this.handlerOptions 
 
      ); 
 
     }, 
 
     trigger: function(e) { 
 
      var lonlat = map.getLonLatFromPixel(e.xy); 
 
      point = new OpenLayers.Geometry.Point(lonlat.lon, lonlat.lat); 
 
      var radius = $("#amount").val(); 
 
      updateFeatureCircle(point, radius); 
 
     } 
 

 
    }); 
 

 
    var click = new OpenLayers.Control.Click(); 
 
    map.addControl(click); 
 
    click.activate(); 
 
} 
 

 
function initializeSlider() { 
 
    $("#slider-range-max").slider({ 
 
     range: "max", 
 
     min: 1000000, 
 
     max: 3000000, 
 
     value: 1000000, 
 
     slide: function(event, ui) { 
 
      $("#amount").val(ui.value); 
 
      if (typeof point == "undefined") { 
 
       point = new OpenLayers.Geometry.Point(0, 0); 
 
      } 
 
      var radius = $("#amount").val(); 
 
      updateFeatureCircle(point, radius); 
 
     } 
 
    }); 
 
} 
 

 
function updateFeatureCircle(point, radius) { 
 
    if (typeof featurecircle != "undefined") { 
 
     vector.removeFeatures([featurecircle]); 
 
    } 
 
    var circle = OpenLayers.Geometry.Polygon.createRegularPolygon(
 
     point, 
 
     radius, 
 
     40, 
 
     0 
 
    ); 
 

 

 
    featurecircle = new OpenLayers.Feature.Vector(circle); 
 
    vector.addFeatures([featurecircle]); 
 
} 
 
$(window).load(function() { 
 
    var map = initializeMap(); 
 
    initializeSlider(); 
 
    addClickEventHandlertoMap(map); 
 
});

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> 
 
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> 
 
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"> 
 
<script type="text/javascript" src="http://openlayers.org/api/OpenLayers.js"></script> 
 
<link rel="stylesheet" type="text/css" href="http://openlayers.org/en/v3.16.0/css/ol.css"> 
 

 

 
<p> 
 
    <label for="amount">Minimum number</label> 
 
    <input type="text" id="amount" value="1000000" style="border:0; color:#f6931f; font-weight:bold;"> 
 
</p> 
 
<div id="slider-range-max"></div> 
 
<div id="map" style="width:600px;height:600px;"></div>