Thymeleaf 中的 OpenLayers 标记

Question

我有这个 Thymeleaf，带有 2 个 OpenLayers（一个开源 Javascript 库，用于在网页上加载、显示和渲染来自多个来源的地图）标记，但页面中只显示了 1 个

<div id="Map">
    <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
    <script th:inline="javascript">
    /*<![CDATA[*/

    var lat = /*[[${lat}]]*/ ;
    var lon = /*[[${lng}]]*/ ;
    var zoom = 18;

    var fromProjection = new OpenLayers.Projection("EPSG:4326"); // Transform from WGS 1984
    var toProjection = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection

    var position = new OpenLayers.LonLat(lon, lat).transform(fromProjection, toProjection);
    var position2 = new OpenLayers.LonLat('4.373067', '50.828010').transform(fromProjection, toProjection);

    var size = new OpenLayers.Size(32, 48);
    var offset = new OpenLayers.Pixel(-(size.w / 2), -size.h);
    var icon = new OpenLayers.Icon('../../../images_pebloc/map_marker.png', size, offset);

    map = new OpenLayers.Map("Map");
    var mapnik = new OpenLayers.Layer.OSM();
    map.addLayer(mapnik);

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

    map.addLayer(markers);

    markers.addMarker(new OpenLayers.Marker(position, icon));
    markers.addMarker(new OpenLayers.Marker(position2, icon));

    map.setCenter(position, zoom);

    var myLocation = new OpenLayers.Geometry.Point(lon, lat).transform('EPSG:4326', 'EPSG:3857');

    /*]]>*/
    </script>
</div>

Answer 1

OpenLayers.LonLat 期望数字作为参数，而不是字符串。所以把position2的定义改成

   var position2 = new OpenLayers.LonLat(4.373067, 50.828010).transform(fromProjection, toProjection);

Thymeleaf 中的 OpenLayers 标记

OpenLayers markers in Thymeleaf

html

javascript

geolocation

openlayers

thymeleaf