【问题标题】:Leaflet - Unwanted movement on clicking markers传单 - 单击标记时不需要的移动
【发布时间】:2018-10-02 04:06:21
【问题描述】:


我正在尝试制作地图和标记,并在单击标记时弹出窗口。我为此使用传单插件。一切正常,除了当我点击任何标记时,地图将移动到某个点,而不是专注于标记的弹出窗口。但是如果我改变浏览器的大小(比如还原或打开控制台),那么它会正常工作。我有一个函数来获取弹出窗口的 HTML。这是我的代码

      var cloudmadeUrl = 'https://server/tiles/test_format5_set4/tiles_{z}_{y}x{x}.png',marker,
        cloudmadeAttribution = '', latlng,
        cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 4, attribution: cloudmadeAttribution});
        latlng = new L.LatLng(0, 0);
        var LeafIcon = L.Icon.extend({
            options: {
                iconSize:     [25, 41],   // size of the icon
                shadowSize: [50, 64],   // size of the shadow 
                iconAnchor: [22, 94],   // / point of the icon which will correspond to marker's location
                shadowAnchor: [4, 62],    // the same for the shadow
                popupAnchor: [-3, -76]   // point from which the popup should open relative to the iconAnchor
            }
        });
        var completedIcon = new LeafIcon({iconUrl: '../styles/images/marker-icon green.png'});
        var startedIcon = new LeafIcon({iconUrl: '../styles/images/marker-icon red.png'});
        var createdIcon = new LeafIcon({iconUrl: '../styles/images/marker-icon yellow.png'});
    map = new L.Map('table_map', {center : latlng, zoom : 1, layers : [cloudmade]});
    ticket_layer.clearLayers();
    map.removeLayer(ticket_layer);
   for (var m in  SOURCE_ARRAY) {
                (function (n) {
                    if (SOURCE_ARRAY.hasOwnProperty(n)) {
                        createHtmlForPopUp(n, function (data) {

                            if (SOURCE_ARRAY[n].state.state === "created") {
                                marker = new L.Marker(new L.LatLng(SOURCE_ARRAY[n].location.x, SOURCE_ARRAY[n].location.y), {icon: createdIcon});       
                            }
                            else if (SOURCE_ARRAY[n].state.state === "started") {
                                marker = new L.Marker([SOURCE_ARRAY[n].location.x, SOURCE_ARRAY[n].location.y], {icon: startedIcon});
                            }
                            else {
                                marker = new L.Marker([SOURCE_ARRAY[n].location.x, SOURCE_ARRAY[n].location.y], {icon: completedIcon});
                            }
                            marker.bindPopup(data); // calling a function with callback
                            ticket_layer.addLayer(marker);
                        });
                    }
                })(m);  
            } // for loop ends here

        map.addLayer(ticket_layer);

【问题讨论】:

  • 你可以创建一个jsfiddle.net 为同一个
  • 我试过了,但它在小提琴中不起作用。 link 我试过的那个,但它从 Leaflet Object 本身给出错误

标签: javascript jquery-plugins leaflet


【解决方案1】:

您是否尝试将 autoPan 选项设置为 false?

Docs.

【讨论】:

    猜你喜欢
    • 2017-07-06
    • 2023-01-13
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多