Question

我不确定这个问题的具体技术术语是什么，所以请原谅这个愚蠢的问题。

我有这样的传单地图：

/RU <username> /RP <password>

我正在为此地图添加标记，如下所示：

<div id="custom-modal" class="modal-demo">
        <button type="button" class="close" onclick="Custombox.close()"><span>&times;</span><span class="sr-only">Close</span></button>
            <h4 class="custom-modal-title">Add New Category</h4>
                <div class="custom-modal-text text-left">
                    <form role="form">
                        <div class="form-group" method="post">
                            <label for="name">Category Name</label>
                                <input type="text" class="form-control" id="cat_name" name="cat_name" placeholder="Enter category name">
                        </div>
                        <button type="submit" class="btn btn-default waves-effect waves-light" name="btn-savecat" id="btn-savecat">Save</button>
                        <button type="button" class="btn btn-danger waves-effect waves-light m-l-10">Cancel</button>
                        <?php
                        if(isset($_GET['cat_name']))
                                    {   
                                        try
                                            {
                                                    $id=$_GET['cat_name'];
                                                    $result = $DB_con->prepare("INSERT INTO category(cat_name,cat_status) 
                                                    VALUES(:userid,'Active')");
                                                    $result->bindParam(':userid', $id);
                                                    $result->execute();


                                            }
                                        catch(PDOException $e)
                                            {
                                                echo $e->getMessage();
                                            }                                           
                                    }   
                        ?>

                    </form>
        </div>

每隔几秒钟，我会更新vehicleMarker的位置并将地图居中

 var map = L.map("dvMapContainer",
                {

                }).setView([39.782388193, -86.14135265], 14);

这种方法很好但是由于地图不断移动，效果在视觉上并不十分悦目。我想只移动标记，直到它接近地图的边缘，然后重新定位地图。那可能吗？任何提示/解决方案都将非常感激。

Answer 1

每次检查（每隔几秒），您可以将标记位置与地图边界进行比较：

var bounds = map.getBounds();
if(vehicleMarker.getLatLng().lng > bounds.getEast()-.001 || vehicleMarker.getLatLng().lng < bounds.getWest()+.001 || vehicleMarker.getLatLng().lat > bounds.getNorth()-.001 || vehicleMarker.getLatLng().lat < bounds.getSouth()+.001)
    //change bounds

如果您的下一个标记位置接近当前边界，则更改地图的当前边界。

您可以根据缩小的距离来更改.001。

有关边界的更多信息：http://leafletjs.com/reference.html#latlngbounds

标记靠近边缘时使传单地图居中

1 个答案: