Question

我无法理解为什么某些弹出窗口没有显示在地图上。我检查了一切，原因似乎是地图以太平洋而不是大西洋为中心的坐标或方式。我想知道它是不是一个错误。

未显示的弹出窗口位于印度尼西亚坐标：[117.298827，-3.988473]和[106.84513，-6.21462]。当我更改坐标时，弹出窗口呈现正常。我该如何更改坐标？

这是代码：

    <!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title></title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.29.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.29.0/mapbox-gl.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>

<style>
.map-overlay {
    font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
    position: absolute;
    width: 25%;
    top: 0;
    left: 0;
    padding: 10px;
}

.map-overlay .map-overlay-inner {
    background-color: #fff;
    box-shadow:0 1px 2px rgba(0, 0, 0, 0.20);
    border-radius: 3px;
    padding: 10px;
    margin-bottom: 10px;
}

.map-overlay h2 {
    line-height: 24px;
    display: block;
    margin: 0 0 10px;
}

.map-overlay input {
    background-color: transparent;
    display: inline-block;
    width: 100%;
    position: relative;
    margin: 0;
    cursor: ew-resize;
}
</style>

<div id='map'></div>

<div class='map-overlay top'>
    <div class='map-overlay-inner'>
        <h2>Deployment Map</h2>
    </div>
</div>

<script src="https://d3js.org/d3.v4.js"></script>

<script>
mapboxgl.accessToken = 'pk.eyJ1Ijoia3Z5YiIsImEiOiJjaXUwMHEwcmgwMDAxMnlvM3NzMm0xbGozIn0.JL_eeNZL_lDoJxijNqFPoA';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/dark-v9',
    center: [-171.351550, 22.458428],
    zoom: 2
});

map.on('load', function() {
        map.addSource('locations', {
            'type': 'geojson',
            'data': {
            "type": "FeatureCollection",
            "features": [{
                "type": "Feature",
                "geometry": {
                    "type": "Point",
                    "coordinates": [-119.417931, 36.778259]
                },
                "properties": {
                    "title": "California",
                    "marker-symbol": "fire-station-15",
                    "Year": 2003,
                    "Network": "3G Roll Out"
                }
            }, {
                "type": "Feature",
                "geometry": {
                    "type": "Point",
                    "coordinates": [106.84513, -6.21462]
                },
                "properties": {
                    "title": "Jakarta",
                    "marker-symbol": "fire-station-15",
                    "Year": 2004,
                    "Network": "WiMax Network"
                }
            }, {
                "type": "Feature",
                "geometry": {
                    "type": "Point",
                    "coordinates": [117.298827, -3.988473]
                },
                "properties": {
                    "title": "Indonesia",
                    "marker-symbol": "fire-station-15",
                    "Year": 2008,
                    "Network": "LTE 4G National Roll Out"
                }
            }, {
                "type": "Feature",
                "geometry": {
                    "type": "Point",
                    "coordinates": [-116.973635, 41.678383]
                },
                "properties": {
                    "title": "USA Western States",
                    "marker-symbol": "fire-station-15",
                    "Year": 2013,
                    "Network": "LTE 4G National Roll Out"
                }
            }, {
                "type": "Feature",
                "geometry": {
                    "type": "Point",
                    "coordinates": [-84.970223, 34.769802]
                },
                "properties": {
                    "title": "Dalton, Georgia",
                    "marker-symbol": "fire-station-15",
                    "Year": 2015,
                    "Network": "City Wi-Fi"
                }
            }, {
                "type": "Feature",
                "geometry": {
                    "type": "Point",
                    "coordinates": [-83.953125, 33.672545]
                },
                "properties": {
                    "title": "North-West Georgia, USA",
                    "marker-symbol": "fire-station-15",
                    "Year": 2017,
                    "Network": "11 City Hybrid Wireless Solution"
                }
            }]
        }
    });


        map.addLayer({
            'id': 'location-markers',
            'type': 'symbol',
            'source': 'locations',
            "layout": {
        "icon-image": "{marker-symbol}",
        'icon-size': 2,
        'icon-allow-overlap': true
    }
});

        // Create a popup, but don't add it to the map yet.
        var popup = new mapboxgl.Popup({
            closeButton: false,
            closeOnClick: false
});

map.on('mousemove', function(e) {
    var features = map.queryRenderedFeatures(e.point, { layers: ['location-markers'] });
    // Change the cursor style as a UI indicator.
    map.getCanvas().style.cursor = (features.length) ? 'pointer' : '';

    if (!features.length) {
        popup.remove();
        return;
    }

    var feature = features[0];

    // Populate the popup and set its coordinates
    // based on the feature found.
    popup.setLngLat(feature.geometry.coordinates)
        .setHTML('<b><font color="red"> Location Information</font></b>'+'<br><b><font color="red">Location: </font></b>'+feature.properties.title+'<br><b><font color="red">Year: </font></b>'+feature.properties.Year+'<br><b><font color="red">Network: </font></b>'+feature.properties.Network)
        .addTo(map);
});
});
</script>

</body>
</html>

Answer 1

我不知道为什么，但是，经度就是问题。如果你将地图平移到右边，那么印度尼西亚的弹出窗口就能正常工作。

看起来像Mapbox-GL-JS中的错误：https://github.com/mapbox/mapbox-gl-js/issues/3902

并非所有Mapbox Popup都显示

1 个答案: