文章/答案/技术大牛

发布

问用传单旋转标记
EN

Stack Overflow用户

提问于 2015-01-26 15:45:42

回答 1查看 7.7K关注 0票数 6

我有带有坐标查找器的传单地图，坐标推荐包含标题点。我试图旋转我的图标标记到标题点。代码：(活动地址：http://84.95.7.35/~hzcoil/index2.html)

<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/airport-24@2x.png",
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>

我发现了这个：https://github.com/bbecquet/Leaflet.PolylineDecorator/blob/master/src/L.RotatedMarker.js

我花了大约5个小时来完成它，但我无法与我的代码相匹配。这是坐标推荐的：x=2196.170 y=39.880 z=1895.350, Heading: 0.624的“标题”应该是旋转。

如何将它与我的代码相匹配？

javascript

css

google-maps

rotation

leaflet

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-01-26 16:18:35

示例页面不包括RotatedMarker扩展。

一旦包含它，就可以使用rotatedMarker方法来创建标记并在options对象中传递角度(它必须是度，而不是弧度)。

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

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

票数 5

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/28153532

复制

相似问题

问用传单旋转标记
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用传单旋转标记EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用传单旋转标记
EN