Obracaj znacznik z ulotką

Mam mapę ulotek z współrzędnymi, polecam współrzędne zawiera Nagłówek. Próbuję obrócić znacznik ikony do punktu kursu. kod: (na żywo pod adresem: http://84.95.7.35/~hzcoil/index2.html)Obracaj znacznik z ulotką

<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js" type="text/javascript"></script> 
<script src="http://84.95.7.35/~hzcoil/js/jquery-1.11.0.min.js" type="text/javascript"></script> 
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" /> 

<script> 
function init() { 

var latScaleVal = 8300; 
var longScaleVal = 8300; 
var latScale = latScaleVal/256; 
var longScale = longScaleVal/256; 
var fixLat = function(e) { 
if (e > 0) { 
e = -e 
} else { 
e = Math.abs(e) 
} 
return e 
}; 

var coords = function(e, t) { 
e = fixLat(e); 
var n = e/latScale + latScaleVal/2/latScale; 
var r = t/longScale + longScaleVal/2/longScale; 
return [-n, r] 
}; 


var mapMinZoom = 0; 
var mapMaxZoom = 6; 
var map = L.map('map', { 
    maxZoom: mapMaxZoom, 
    minZoom: mapMinZoom, 
    crs: L.CRS.Simple 
}).setView([0, 0], mapMaxZoom); 

var mapBounds = new L.LatLngBounds(
map.unproject([0, 8192], mapMaxZoom), 
map.unproject([8192, 0], mapMaxZoom)); 

map.fitBounds(mapBounds); 
L.tileLayer('http://www.h1z1maps.com/images/newmap/{z}/{x}/{y}.jpg', { 
    minZoom: mapMinZoom, maxZoom: mapMaxZoom, 
    bounds: mapBounds, 
    noWrap: true 
}).addTo(map); 


var roticon = L.icon({ 
iconUrl: "https://www.mapbox.com/maki/renders/[email protected]", 
className: 'RotatedMarker', 
iconSize: [50, 50], 
iconAnchor: [10, 21], 
popupAnchor: [5, -35] 
}); 


$("#findmyloc").on("submit", function() { 
try { 
var e = $("#locbox").val().match(/-?[0-9.0-9]+/g); 
$("#locbox").val(""); 
var goto = L.marker(coords(e[0], e[2], e[3]), {icon:roticon}).addTo(map); 
} catch (t) { 
console.log(t) 
} 
return false 
}); 

    } 
</script> 

<style> 
    html, body, #map { width:700px; height:500px; margin:0; padding:0; } 
</style> 


    </head> 
<body onload="init()"> 
<div id="map"></div> 

<form id="findmyloc"> 
<input id="locbox" type="text" value="x=2196.170 y=39.880 z=1895.350, Heading: 0.624" /> 
<input type="submit" class="search" value="submit" /> 
</form> 
</body>

Znalazłem to: https://github.com/bbecquet/Leaflet.PolylineDecorator/blob/master/src/L.RotatedMarker.js

byłem w pracy to około 5 godzin, ale nie mogłem dopasować go do mojego kodu. to współrzędne polecam: x=2196.170 y=39.880 z=1895.350, Heading: 0.624 "Nagłówek" powinien być obrót.

Jak mogę go dopasować do mojego kodu?

Źródło

2015-01-26 Edan Nos

Możesz spróbować użyć transform: translate (595px, 243px) rotateZ (190deg) – Blauharley

Twoja przykładowa strona nie zawiera rozszerzenia RotatedMarker.

Gdy to nie można nazwać stosując metodę rotatedMarker tworzenia znacznik i przechodzącą pod kątem w opcji przedmiot (musi być w stopniach, a nie radianów)

var goto = L.rotatedMarker(coords(e[0], e[2]), { 
     icon:roticon, 
     angle:+e[3]*180/Math.PI // convert to degrees 
    }).addTo(map);

demo: http://plnkr.co/edit/QioXRLA8PYnrlb2ZH7kr?p=preview

Źródło

2015-01-26 16:18:35

Dziękuję bardzo! Bardzo mi pomogłeś :) –

Obracaj znacznik z ulotką

Odpowiedz

Powiązane problemy