Openlayers 3 - 无法实现我的标记，但填充确实有效

Openlayers 3 - can't implement my marker but fill does work

本文关键字：填充 有效 我的 实现 Openlayers      更新时间：2023-09-26

我正在尝试向我的地图添加标记，但对我来说效果不太好。地图和坐标确实有效。我使用 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添加标记

我的微软边缘正在给出错误消息：SCRIPT16386：不支持此类接口，ol.js （422,95）

火狐给我：传递给 getElementById（） 的空字符串。jquery.unobtrusive-ajax.js：31：20类型错误：Node.appendChild 的参数 1 未实现接口节点。

在加载页面时，我上传了 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>

有什么建议我做错了什么吗？提前感谢！

从 ol

的 3.12.0 版本（更改 #4485 https://github.com/openlayers/ol3/pull/4485/files）开始，该元素传递给 ol。覆盖必须是 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]
    }));
相关文章：