Нажав на маркеры Mapbox

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 & 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); 

Вы можете пройти любой HTML вы хотите в аргументе bindPopup. https://www.mapbox.com/mapbox.js/example/v1.0.0/clicks-in-popups/

Тогда это должно быть довольно простым с помощью 'addEventListener (' click ', function)' в этой переменной маркера.

Или же -

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/

Успехов!