Question

我已经能够将标记集成到我们正在使用的地图框中，但仍然想知道我们是否可以点击它们。如果是这样的话？

以下是我的代码：

<style>
/*
 * Unlike other icons, you can style `L.divIcon` with CSS.
 * These styles make each marker a circle with a border and centered text.
 */
.count-icon1 {
  background:url(images/redpin.png);  
  color:#000;
  font-weight:600;
  text-align:center; 
  padding:19px 0 0 0px; font-size:180%;
 }
.count-icon2 {
  background:url(images/greenpin.png);  
  color:#000;
  font-weight:600;
  text-align:center; 
  padding:19px 0 0 0px; font-size:180%;
 }
</style>

js代码：

var defaultLat = 39.12367;
        var defaultLon = -76.81229;

        if($scope.currentLocDetails != null){
            if($scope.currentLocDetails.Lat != null && $scope.currentLocDetails.Lon != null){
                defaultLat  = $scope.currentLocDetails.Lat;
                defaultLon  = $scope.currentLocDetails.Lon;
            }
        }

        var x = 0;
        if(map != null)
            map.remove();
        map = L.mapbox.map('map_view', 'your key here').setView([defaultLat, defaultLon], 9);
        for (var i = 0; i < responseData.JobLocation.length; i++) {

            var eachObj  = responseData.JobLocation[i];
            if(eachObj.Lat != null && eachObj.Lon != null){
                x++;
                // Use a little math to position markers.
                // Replace this with your own code.
                L.marker([
                    eachObj.Lat,
                    eachObj.Lon
                ], {
                    icon: L.divIcon({
                        // Specify a class name we can refer to in CSS.
                        className: ((currentSelectedIndex + 1) == i + 1)?'count-icon1':'count-icon2',
                        // Define what HTML goes in each marker.
                        html: i + 1,
                        // Set a markers width and height.
                        iconSize: [65, 94]
                    })
                }).addTo(map);
            }
        }

我试过做一点R＆amp; D，但不要去哪里：我们需要使用featureLayer，但不知道如何。

对于点击功能，我们需要遵循此代码，但如何？

// Listen for individual marker clicks.
myLayer.on('click',function(e) {
    // Force the popup closed.
    e.layer.closePopup();

    var feature = e.layer.feature;
    var content = '<div><strong>' + feature.properties.title + '</strong>' +
                  '<p>' + feature.properties.description + '</p></div>';

    info.innerHTML = content;
});

非常感谢任何帮助。

由于

Answer 1

我相信使用Mapbox有很多方法可以解决这个问题，不幸的是我无法访问我现在使用它的项目，所以我只是要关闭Mapbox文档。

按照您的示例，这看起来最简单 - 如果您添加了标记，例如：

var marker = L.marker([43.6475, -79.3838], {
  icon: L.mapbox.marker.icon({
    'marker-color': '#9c89cc'
  })
})
.bindPopup('<p>Your html code here</p>')
.addTo(map);

您可以在bindPopup参数中传递所需的任何HTML。 https://www.mapbox.com/mapbox.js/example/v1.0.0/clicks-in-popups/

然后通过addEventListener（＆＃39;点击＆＃39;，功能）＆＃39;它应该非常简单。在那个标记变量上。

或者 -

myLayer.on('click', function(e) {
    resetColors();
    e.layer.feature.properties['old-color'] = e.layer.feature.properties['marker-color'];
    e.layer.feature.properties['marker-color'] = '#ff8888';
    myLayer.setGeoJSON(geoJson);
});

map.on('click', resetColors);

在地图变量上有效地添加一个事件监听器 - 然后通过传递给事件监听器的事件参数听取您点击的内容。

这可能很有用：https://www.mapbox.com/mapbox.js/example/v1.0.0/change-marker-color-click/

祝你好运！

单击Mapbox标记

1 个答案: