javascript - "open popup programmatically"按钮在我创建的 mapbox.js map 上不起作用

Question

我已经使用 Mapbox.js 设置了 map ，我需要使用外部按钮打开标记区域。我浏览了 mapbox.com 的示例，发现“open popup programmatically ”选项最合适。

但是，当我将其插入时，它无法与我的 Json 脚本一起使用。我需要帮助吗？

我提供了我的[脚本]供您查看:

L.mapbox.accessToken = 'pk.eyJ1Ijoic21vcnJpczMiLCJhIjoiU1RtclNJMCJ9.AWDKQ9l9dY32tB5J8srivg';
var map = L.mapbox.map('mapbox', 'smorris3.78f0898a', {
        attributionControl: false,
        zoomControl: false,
        legendControl: {
            position: 'bottomleft'
        }
    })
    .setView([32.888065, -96.964602], 11);

var myLayer = L.mapbox.featureLayer().addTo(map);

var geoJson = [{
        "type": "Feature",
        "geometry": {
            "type": "Point",
            "coordinates": [-96.964602, 32.888065]
        },
        "properties": {
            "title": "My Title #1",
            "description": "My Description #1",
            "icon": {
                "iconUrl": "http://www.clipartbest.com/cliparts/RTA/ArX/RTAArXyTL.png",
                "iconSize": [30, 30], // size of the icon
                "iconAnchor": [15, 15], // point of the icon which will correspond to marker's location
                "popupAnchor": [0, -15], // point from which the popup should open relative to the iconAnchor
                "className": "dot"
            }
        }
    }, {
        "type": "Feature",
        "geometry": {
            "type": "Point",
            "coordinates": [-111.858841, 33.436066]
        },
        "properties": {
            "title": "My Title #2",
            "description": "My Description #2",
            "icon": {
                "iconUrl": "http://www.clipartbest.com/cliparts/RTA/ArX/RTAArXyTL.png",
                "iconSize": [30, 30], // size of the icon
                "iconAnchor": [15, 15], // point of the icon which will correspond to marker's location
                "popupAnchor": [0, -15], // point from which the popup should open relative to the iconAnchor
                "className": "dot"
            }
        }
    }

];

//==============================================
// map.dragging.disable();
map.touchZoom.disable();
// map.doubleClickZoom.disable();
map.scrollWheelZoom.disable();

//==============================================
// Custom Icon
myLayer.on('layeradd', function(e) {
    var custmarker = e.layer,
        features = custmarker.feature;
    custmarker.setIcon(L.icon(features.properties.icon));
});

//==============================================
// Button popup
map.featureLayer.on('ready', function(e) {
    document.getElementById('open-popup').onclick = clickButton;
});

function clickButton() {
    map.featureLayer.eachLayer(function(marker) {
        if (marker.feature.properties.title === 'My Title #1') {
            marker.openPopup();
        }
    });
}

//==============================================
// Change location of zoom
new L.Control.Zoom({
    position: 'topright'
}).addTo(map);

// Add features to the map.
myLayer.setGeoJSON(geoJson);

.map-container {
    width: 100%;
    height: 425px;
    position: relative;
}

#mapbox {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
}

<link href="https://api.tiles.mapbox.com/mapbox.js/v2.1.9/mapbox.css" rel="stylesheet" />
<script src="https://api.tiles.mapbox.com/mapbox.js/v2.1.9/mapbox.js"></script>


<div class="map-container">
    <div class="map-info" id="mapbox"></div>
</div>

<button id='open-popup' class='ui-control'>open popup</button>

Answer 1

已解决。这部分:

map.featureLayer.on('ready', function(e) {
    document.getElementById('open-popup').onclick = clickButton;
});

永远不会触发，因为您已经有另一个事件:

myLayer.on('layeradd', function(e) {

onready 事件用于异步调用。 Reference here .

L.mapbox.accessToken = 'pk.eyJ1Ijoic21vcnJpczMiLCJhIjoiU1RtclNJMCJ9.AWDKQ9l9dY32tB5J8srivg';
var map = L.mapbox.map('mapbox', 'smorris3.78f0898a', {
        attributionControl: false,
        zoomControl: false,
        legendControl: {
            position: 'bottomleft'
        }
    })
    .setView([32.888065, -96.964602], 11);

var myLayer = L.mapbox.featureLayer().addTo(map);

var geoJson = [{
        "type": "Feature",
        "geometry": {
            "type": "Point",
            "coordinates": [-96.964602, 32.888065]
        },
        "properties": {
            "title": "My Title #1",
            "description": "My Description #1",
            "icon": {
                "iconUrl": "http://www.clipartbest.com/cliparts/RTA/ArX/RTAArXyTL.png",
                "iconSize": [30, 30], // size of the icon
                "iconAnchor": [15, 15], // point of the icon which will correspond to marker's location
                "popupAnchor": [0, -15], // point from which the popup should open relative to the iconAnchor
                "className": "dot"
            }
        }
    }, {
        "type": "Feature",
        "geometry": {
            "type": "Point",
            "coordinates": [-111.858841, 33.436066]
        },
        "properties": {
            "title": "My Title #2",
            "description": "My Description #2",
            "icon": {
                "iconUrl": "http://www.clipartbest.com/cliparts/RTA/ArX/RTAArXyTL.png",
                "iconSize": [30, 30], // size of the icon
                "iconAnchor": [15, 15], // point of the icon which will correspond to marker's location
                "popupAnchor": [0, -15], // point from which the popup should open relative to the iconAnchor
                "className": "dot"
            }
        }
    }

];

//==============================================
// map.dragging.disable();
map.touchZoom.disable();
// map.doubleClickZoom.disable();
map.scrollWheelZoom.disable();

//==============================================
// Custom Icon
myLayer.on('layeradd', function(e) {
    var custmarker = e.layer,
        features = custmarker.feature;
    custmarker.setIcon(L.icon(features.properties.icon));
  
  document.getElementById('open-popup').onclick = clickButton;
});


//==============================================
// Change location of zoom
new L.Control.Zoom({
    position: 'topright'
}).addTo(map);

// Add features to the map.
myLayer.setGeoJSON(geoJson);

function clickButton() {
    myLayer.eachLayer(function(marker) {console.info(marker);
        if (marker.feature.properties.title === 'My Title #1') {
            marker.openPopup();
        }
    });
}

.map-container {
    width: 100%;
    height: 425px;
    position: relative;
}

#mapbox {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
}

<link href="https://api.tiles.mapbox.com/mapbox.js/v2.1.9/mapbox.css" rel="stylesheet" />
<script src="https://api.tiles.mapbox.com/mapbox.js/v2.1.9/mapbox.js"></script>


<div class="map-container">
    <div class="map-info" id="mapbox"></div>
</div>

<button id='open-popup' class='ui-control'>open popup</button>