Question

我遇到OpenLayers问题。如果我想动态更改某个标记的图标（例如，用另一种颜色绘制标记以指示状态更改），标记开始表现出错误，没有显示在正确的位置，甚至半随机定位自己的副本，在放大或缩小地图时会很明显。

我已经意识到当我重新分配marker.icon属性时会出现问题，这些属性来自一些预先加载的图标图像。我曾尝试使用和不使用icon.clone（）来重绘。

这是一个完整但简化的示例，它随机移动标记，也应修改其图标。如果你注释掉“麻烦的代码”片段，除了图标更改外，它的效果很好：

<!DOCTYPE HTML>

<HTML>
    <HEAD>
        <TITLE>Mapa</TITLE>
        <SCRIPT language="javascript" type="text/javascript" src="OpenLayers.js"></SCRIPT>
        <SCRIPT language="javascript" type="text/javascript">
            var vMapa;
            var prj0 = new OpenLayers.Projection("EPSG:4326");   // Transform from WGS 1984
            var prj1 = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection
            var vLon = 12.568142;
            var vLat = 55.676320;
            var vTimer = null;
            var vCont = 0;
        </SCRIPT>
    </HEAD>
    <BODY onClose="vTimer = null; vLon = null; vLat = null;">
        <DIV id="demoMap" style="height: 700px; width: 1000px;"></DIV><DIV id="Contador">0</DIV>
        <SCRIPT>
            var options = {
                controls: [
                    new OpenLayers.Control.Navigation(),
                    new OpenLayers.Control.PanZoomBar(),
                ]
            };

            vMapa = new OpenLayers.Map("demoMap", options);
            vMapa.addLayer(new OpenLayers.Layer.OSM());
            vMapa.setCenter(new OpenLayers.LonLat(vLon, vLat).transform(prj0, prj1), 15, false, false);

            var Navigation = new OpenLayers.Control.Navigation( { defaultDblClick: function(event) { return; } } );

            vMapa.addControl(Navigation);           

            var markers = new OpenLayers.Layer.Markers("Markers");
            vMapa.addLayer(markers);

            var size    = new OpenLayers.Size(12, 12);
            var offset  = new OpenLayers.Pixel(-6, -6);
            var iconOff = new OpenLayers.Icon('img/CircOff.png', size, offset);
            var iconOn  = new OpenLayers.Icon('img/CircOn.png', size, offset);

            var marker = new OpenLayers.Marker(new OpenLayers.LonLat(vLon, vLat).transform(prj0, prj1), iconOff.clone());
            marker.setOpacity(1.0);
            marker.events.register('mousedown', marker, function(evt) { vMapa.panTo(marker.lonlat); OpenLayers.Event.stop(evt); });
            marker.pfInfo = 'Vel: 0.0 km/h';
            markers.addMarker(marker);
            vTimer = setTimeout('TimerEvent()', 1000);

            function TimerEvent() {
                vLon += ((Math.random() - 0.5) / 500);
                vLat += ((Math.random() - 0.5) / 500);

                // ------- Troublesome code -------
                var ixIcon = Math.round(Math.random());
                if (ixIcon == 0) {
                    marker.icon = iconOff.clone();
                } else {
                    marker.icon = iconOn.clone();
                }
                // --------------------------------

                var newLonLat = new OpenLayers.LonLat(vLon, vLat).transform(prj0, prj1);
                var newPx = marker.map.getLayerPxFromViewPortPx(marker.map.getPixelFromLonLat(newLonLat));
                marker.moveTo(newPx);

                marker.draw();

                vCont ++;
                document.getElementById('Contador').innerHTML = vCont;

                vTimer = setTimeout('TimerEvent()', 1000);
            }
        </SCRIPT>
    </BODY>
</HTML>

提前感谢你的建议。

Answer 1

我从不使用Marker来创建标记。我创建了一个Vector层，并添加了Point对象。然后设置这些点的样式。

效果更好，功能更多。

Answer 2

您可以创建一个可以将SVG作为字符串返回的restful Web服务。传递的参数将告诉服务图标上需要更改的内容。该服务将读入模板SVG适当地更改它并返回它。

更改OpenLayers标记图标

2 个答案: