Question

我将MapBox实现到我的网站中。我之后对此进行了模拟：

https://www.mapbox.com/guides/building-a-store-locator/

我已将所有内容设置为当前拉入我已进入我的位置/新表单的位置。然后我会显示地图旁边的位置列表，但是当我点击位置名称时，地图就不会移动到该位置。只有弹出框出现标记（这是正确的）。

现在当我一直缩放到地图的边缘时，我终于看到标记被种植在地图的最底部边缘，而不是任何纬度/经度。

因此，我已经能够确定我的数据库中的纬度/经度是否已拉入我输入的任何位置，但我无法确定我需要在哪里修复此问题。有人可以帮忙吗？

LOCATION.RB：

def to_geo_json_feature
{
    "type": "Feature",
    "geometry": 
    {
        "type": "Point",
        "coordinates": [
            latitude,
            longitude
        ]
    },
    "properties": 
    {
        "name": name,
        "address": address1 + ', ' + address2,
        "city": city,
        "country": "United States",
        "zip": zip,
        "state": state
    }
}
end

LOCATIONS.HTML.RB

<script>
L.mapbox.accessToken = '<my access token is here>';
    var geojson = [  
    {
        "type": "FeatureCollection",
        "features": <%= raw Location.all.map(&:to_geo_json_feature).to_json %>
    }];

var map = L.mapbox.map('map', '<my mapbox map id is here>')
.setView([38.909671288923, -77.034084142948], 12);

var listings = document.getElementById('listings');
var locations = L.mapbox.featureLayer().addTo(map);

locations.setGeoJSON(geojson);

function setActive(el) 
{
    var siblings = listings.getElementsByTagName('div');

    for (var i = 0; i < siblings.length; i++) 
    {
        siblings[i].className = siblings[i].className
        .replace(/active/, '').replace(/\s\s*$/, '');
    }

    el.className += ' active';
}

locations.eachLayer(function(locale) 
{
    // Shorten locale.feature.properties to just `prop` so we're not
    // writing this long form over and over again.
    var prop = locale.feature.properties;

    // Each marker on the map.
    var popup = '<h3>' + prop.name + '</h3><div>' + prop.address + '<br>' + prop.city + ', ' + prop.state + ' ' + prop.zip;

    link.onclick = function() 
    {
        setActive(listing);

        // When a menu item is clicked, animate the map to center
        // its associated locale and open its popup.
        map.setView(locale.getLatLng(), 16);
        locale.openPopup();
        return false;
    };

    // Marker interaction
    locale.on('click', function() 
    {
        // 1. center the map on the selected marker.
        map.panTo(locale.getLatLng());

        // 2. Set active the markers associated listing.
        setActive(listing);
    });

    popup += '</div>';
    locale.bindPopup(popup);
});
</script>

MapBox map.setView（locale.getLatLng（）不起作用

0 个答案: