标记坐标不正确传单答案

【问题标题】：Marker coordinates not correct leaflet标记坐标不正确传单
【发布时间】：2019-04-19 17:35:12
【问题描述】：

我正在使用名为 Exile 的 mod 创建名为 ArmA 3 的游戏的管理员/用户控制面板。 Exile 将 X、Y（以及 Z）坐标放入数据库中。我正在使用 PHP 来获取这些坐标并使用 Leaflet.js 在玩家所在的位置放置一个标记。我正在使用自定义图像 (15360x15360)。

问题： 假设我在位置 (6340, 7801) (x,y)。标记将偏离我实际所在的位置（请参阅下面的 imgurs）

（游戏位置） https://imgur.com/a/Nky9Oqf

（传单标记） https://imgur.com/a/jFco4V5

PHP代码+leaflet.js：

<?php
require_once "application.php";
?>
<html lang="en">
    <head>
        <title>Search</title>
        <link rel="stylesheet" href="leaflet.css">
        <meta charset="UTF-8">
    </head>
    <body>

<?php

if(isset($_GET["q"])) {
    $uid = $_GET["q"];

    $UCP = new UCP("localhost", "root", "root", "testdb", "3306");
    $r = $UCP->getPlayer($uid);
    if($r) {
        $coords = $UCP->getPlayerCoords($uid);
    }
}

?>

<div id="map" style="height: 100%"></div>

<script src="js/leaflet.js"></script>
<script>

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

var w = 15360,
    h = 15360,
    url = 'http://localhost/images/Chernarus_Isles_nogrid.png';

var southWest = map.unproject([0, h], mapMaxZoom);
var northEast = map.unproject([w, 0], mapMaxZoom);
var bounds = new L.LatLngBounds(southWest, northEast);

map.fitBounds(bounds);

L.imageOverlay(url, bounds).addTo(map);

<?php

    if(isset($_GET["q"])) {
        if($r) { ?>
            var pos_x_player = Math.round(<?php echo $coords["pos_x"]; ?>);
            var pos_y_player = Math.round(<?php echo $coords["pos_y"]; ?>);
            var p_loc = map.unproject([pos_y_player, pos_x_player], mapMaxZoom);
            L.marker(p_loc).addTo(map).bindPopup('Player Location');
            <?php

        }
    }

?>
</script>

它成功连接到数据库并获取坐标，但传单总是偏离我实际所在的位置。

任何帮助将不胜感激。如果我错过了什么，请告诉我:)

【问题讨论】：

标签： javascript php html leaflet coordinates

【解决方案1】：

欢迎来到 SO！

Leaflet map的unproject第一个参数是Point对象，按顺序取坐标[horizontal, vertical]：

https://leafletjs.com/reference-1.3.4.html#point-factory

需要[x, y] 形式的数组

因此，您的标记位置不正确很可能只是因为您以错误的顺序传递了坐标：

map.unproject([pos_y_player, pos_x_player], mapMaxZoom)

...应该是：

map.unproject([pos_x_player, pos_y_player], mapMaxZoom)

【讨论】：

嘿，谢谢！回复：我尝试过更改变量，但仍然相差很大。事实上，我什至不在地图上：https://gyazo.com/40c1dedc84f3915cb2a561fa5726ea5e 这可能是图像的大小吗？
可能是这样。没有你的形象，我无法进一步帮助你。

【解决方案2】：

点对象以像素为单位，所以是的，源图像和您的图像必须相同才能在这种情况下获得精确坐标而无需修改。确定大小差异后，您可以创建一个函数将原始坐标转换为地图坐标。

【讨论】：