Ich benutze leafletjs in einer Spring MVC Framework App. Ich möchte benutzerdefinierte Symbole mit benutzerdefinierten Bildern für verschiedene Symbole verwenden.LEAFLET (interaktive Karten) - Marker mit benutzerdefinierten Icons mit Spring MVC Framework (Statischer Inhalt)
Dies ist die Hierarchie meines Projektes:
webaapp
--- core
-------- css
-------- js
-----------images (leafletjs images)
Hier ist der Code
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="${pageContext.request.contextPath}/resources/core/css/leaflet.css" />
<title>leafletjs</title>
</head>
<body>
THIS IMAGE IS OK, I CAN SEE IT:
<img src="${pageContext.request.contextPath}/resources/core/images/marker-icon-2x-blue.png"/>
<div id="mapid" style="width: 800px; height: 600px"></div>
<script src="${pageContext.request.contextPath}/resources/core/js/leaflet.js"></script>
<script>
var mymap = L.map('mapid').setView([51.505, -0.09], 13);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw', {
maxZoom: 18,
attribution:
'osm',
id: 'mapbox.streets'
}).addTo(mymap);
var greenIcon = new LeafIcon({iconUrl: '${pageContext.request.contextPath}/resources/core/js/images/marker-icon-2x-green.png'}),
redIcon = new LeafIcon({iconUrl: '${pageContext.request.contextPath}/resources/core/js/images/marker-icon-2x-red.png'}),
blueIcon = new LeafIcon({iconUrl: '${pageContext.request.contextPath}/resources/core/js/images/marker-icon-2x-blue.png'}),
yellowIcon = new LeafIcon({iconUrl: '${pageContext.request.contextPath}/resources/core/js/images/marker-icon-2x-yellow.png'});
L.marker([51.5, -0.09], {icon: greenIcon}).addTo(mymap)
.bindPopup(" ").openPopup();
L.marker([51.49, -0.091], {icon: greenIcon}).addTo(mymap)
.bindPopup(" ").openPopup();
L.marker([51.48, -0.092], {icon: greenIcon}).addTo(mymap)
.bindPopup("").openPopup();
L.marker([51.47, -0.098], {icon: greenIcon}).addTo(mymap)
.bindPopup(" ").openPopup();
var popup = L.popup();
</script>
</body>
</html>
Wenn ich mir, dass das Standard-Markierungssymbol hier nicht sehen, das Bild custimaze ist und es zeigt mir perfekt:
http://localhost:8080/myApp-1.0-SNAPSHOT/resources/core/js/images/marker-icon-2x.png
aber für die individuelle, die ich mehrere Dinge ohne Erfolg versucht haben:
new LeafIcon({iconUrl: '${pageContext.request.contextPath}/resources/core/js/images/marker-icon-2x-green.png'}),
new LeafIcon({iconUrl: 'images/marker-icon-2x-green.png'}),
new LeafIcon({iconUrl: '/images/marker-icon-2x-green.png'}),
new LeafIcon({iconUrl: '/resources/core/js/images/marker-icon-2x-green.png'}),
new LeafIcon({iconUrl: 'resources/core/js/images/marker-icon-2x-green.png'}),
Mail Hinzufügen (‚$ {pageContext.request.contextPath})‘ im inneren Inhalt meines Skript, um zu sehen, was es löst, ist die Botschaft, die contect Name meiner Anwendung: /myApp-1.0 -snapshot
ich habe auch versucht mit
<spring:url value="/resources/core/js/images/marker-icon-2x-green.png" var="myImage" />
var greenIcon = new LeafIcon({iconUrl:'${myImage}'})
es auch nicht funktioniert, auch in der JSP funktioniert perfekt