16

次のコードを使用して、OpenLayers 3 (OL3) のベクター レイヤーにフィーチャを追加しています。

marker = new ol.Feature({
    geometry: new ol.geom.Point([longitude, latitude]),
    name: "Location Marker"
});
markerStyle = new ol.style.Style({
  image: new ol.style.Icon({
    anchor: [0.5, 1.0],
    anchorXUnits: "fraction",
    anchorYUnits: "fraction",
    src: "Content/Images/OpenLayers/marker_trans.png"
  }),
  zIndex: 100000
});
marker.setStyle(markerStyle);
marker.on("click", function(e) {
  // do something
}, marker);
map.getSource().addFeature(marker);

マーカーは期待どおりに表示されますが、クリック イベントは発生しません。私は何を間違っていますか？

マップレベルで「クリック」に関連付けられたハンドラーが既にあることに注意してください。

map.on("click", function(e) {
  // do something
}, marker);
4

3 に答える 3

3

地図をクリックするだけの場合は、これで十分です。

  var map = new ol.Map({
    target: 'map',
    layers: [
      new ol.layer.Tile({
        source: new ol.source.MapQuest({layer: 'sat'})
      })
    ],
    view: new ol.View({
      center: ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857'),
      zoom: 4
    })
  });

map.on("click", function(evt) {
    var coord = ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326');
    var lon = coord[0];
    var lat = coord[1];
    alert(lon);
    alert(lat);
});
于 2015-05-16T08:56:04.333 に答える
2

クリック可能なマーカーをマップに追加するだけの場合は、オーバーレイを使用できます。HTML ヘッダーで、マーカーのスタイルを定義します。

<style>
    #marker {
        width: 20px;
        height: 20px;
        border: 1px solid #088;
        border-radius: 10px;
        background-color: #0FF;
        opacity: 0.5;
    }
</style>

次に、マップが作成された後、ファイルのスクリプト部分で次のようにします。

    // add marker
    var pos = ol.proj.fromLonLat([0.01123, 0.00612]);
    var marker = new ol.Overlay({
        position: pos,
        positioning: 'center-center',
        element: $('<div id="marker" title="Marker"></div>')
            .popover({
                'placement': 'top',
                'html': true,
                'content': '<strong>anything...</strong>'
            })
            .on('click', function (e) { $(".location-popover").not(this).popover('hide'); }),
        stopEvent: false
    });
    map.addOverlay(marker);
于 2015-08-26T19:42:34.470 に答える