Openlayers 3-无法实现我的标记，但填充确实起作用

Question

我正在尝试在地图上添加标记，但对我来说效果不佳。 地图和坐标可以工作。 我在setFillStrokeStyle位置添加了一个点，该点也可以使用，所以我认为我已经很接近解决方案了。

<script type="text/javascript">
    var zoomIn = @Model.zoom;

    var map = new ol.Map({
        target: 'map',
        layers: [
            new ol.layer.Tile({
                source: new ol.source.MapQuest({ layer: 'osm' })
            })
        ],
        view: new ol.View({
            center: ol.proj.fromLonLat([@Model.lng, @Model.lat]),
            zoom: zoomIn
        })
    });

    @*---This part is bugging, can't seem to implement this:--- *@

    map.addOverlay(new ol.Overlay({
        position: ol.proj.fromLonLat([@Model.lng, @Model.lat]),
        element: $('<img src= "/OpenLayers-2.10/img/marker.png">')
            .css({marginTop: '-200%', marginLeft: '-50%', cursor: 'pointer'})
            .tooltip({title: @Model.Location, trigger: 'click'})
    }));

    @* ---This works if I uncomment this---

    map.on('postcompose', function (evt) {
        evt.vectorContext.setFillStrokeStyle(
            new ol.style.Fill({ color: 'rgba(0, 0, 255, .5)' }),
            new ol.style.Stroke({ color: 'rgba(0, 0, 255, .8)', width: 3 }));
        evt.vectorContext.drawCircleGeometry(
            new ol.geom.Circle(ol.proj.fromLonLat([@Model.lng, @Model.lat]), 40));
    });*@

</script>

我的代码基于这篇文章： 如何使用OpenLayers 3添加标记

我的Microsoft Edge提供了错误消息：SCRIPT16386：不支持这种接口，ol.js（422,95）

Firefox给了我：空字符串传递给getElementById（）。 jquery.unobtrusive-ajax.js：31：20 TypeError：Node.appendChild的参数1未实现接口Node。

在页面加载时，我上传了ol.js脚本：

<script src="~/Scripts/ol.js"></script>
<link href="~/OpenLayers-2.10/theme/default/style.css" rel="stylesheet" />
<style>
    .map {
        height: 400px;
        width: 100%;
    }
</style>

在我做错事情的地方有什么建议吗？ 提前致谢！

Answer 1

从ol的3.12.0版本开始（更改＃4485 https://github.com/openlayers/ol3/pull/4485/files ），传递给ol.Overlay的元素必须是HTML元素，而不是jQuery元素，因此您需要执行以下操作来调整此更改的代码：

 var myElement = $('<img src= "/OpenLayers-2.10/img/marker.png">')
            .css({marginTop: '-200%', marginLeft: '-50%', cursor: 'pointer'})
            .tooltip({title: @Model.Location, trigger: 'click'});

 map.addOverlay(new ol.Overlay({
        position: ol.proj.fromLonLat([@Model.lng, @Model.lat]),
        element: myElement[0]
    }));