Question

当我使用L.Routing.control在地图上绘制路线时，我正在尝试向单张地图添加自定义标记。我的工作正常，但是当我尝试添加带有一些自定义CSS的标记时，它什么也没做，我无法弄清楚为什么，因为没有控制台错误？

这是添加有效的自定义标记的代码

route = L.Routing.control({
  waypoints: [
    L.latLng(window.my_lat, window.my_lng),
    L.latLng(window.job_p_lat, window.job_p_lng)
  ],show: true, units: 'imperial',
 router: L.Routing.mapbox('API-KEY HERE'),
  createMarker: function(i, wp, nWps) {
    if (i === 0 || i === nWps + 1) {
      return mymarker = L.marker(wp.latLng, {
        icon: redIcon
      });
    } else {
      return job_start = L.marker(wp.latLng, {
        icon: greenIcon
      }); 
    }
  }
}).addTo(map);

var greenIcon = new L.Icon({
  iconUrl: 'assets/marker-yellow.png',
  shadowUrl: 'assets/marker-shadow.png',
  iconSize: [25, 41],
  iconAnchor: [12, 41],
  popupAnchor: [1, -34],
  shadowSize: [41, 41]
});

var redIcon = new L.Icon({
  iconUrl: 'assets/marker-red.png',
  shadowUrl: 'assets/marker-shadow.png',
  iconSize: [25, 41],
  iconAnchor: [12, 41],
  popupAnchor: [1, -34],
  shadowSize: [41, 41]
});

我尝试添加的新标记的CSS和代码却无法正常工作

CSS

.css-icon {

    }

    .gps_ring { 
        border: 3px solid #999;
         -webkit-border-radius: 30px;
         height: 18px;
         width: 18px;       
        -webkit-animation: pulsate 1s ease-out;
        -webkit-animation-iteration-count: infinite; 
        /*opacity: 0.0*/
    }

    @-webkit-keyframes pulsate {
            0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
            50% {opacity: 1.0;}
            100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.0;}
    }

JS

var cssIcon = new L.divIcon({
          // Specify a class name we can refer to in CSS.
          className: 'css-icon',
          html: '<div class="gps_ring"></div>'
          // Set marker width and height
          ,iconSize: [22,22]
          // ,iconAnchor: [11,11]
        });

但是当我添加'icon：cssIcon'时，它什么也不显示？

任何帮助都将非常感谢

Answer 1

.gps_ring { 
    position: absolute;
    border: 3px solid #999;
     -webkit-border-radius: 30px;
     height: 18px;
     width: 18px;       
    -webkit-animation: pulsate 1s ease-out;
    -webkit-animation-iteration-count: infinite; 
    /*opacity: 0.0*/
}

然后或者

.css-icon {
   position relative;
}

@-webkit-keyframes pulsate { 
      position: absolute; 
      z-index:9999; 
     0% {-webkit-transform: scale(0.1, 0.1); 
     opacity: 0.0;} 
    50% {opacity: 1.0;} 
  100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.0;} }

Answer 2

好吧，我设法做到了这一点，除了在标记框的左上角有一条线而且我不知道为什么在那儿之外，它还能很好地工作吗？

JS

var jobicon = L.divIcon({
     html:'<div style="background-image: url(img/avatar-small.png);height:46px;width:46px" class="map-label-content"></div><div class="map-label-arrow"></div>'
   });

CSS

.map-label {
  position: absolute;
  bottom: 0;left: -50%;
  display: flex;
  flex-direction: column;
  text-align: center;
}
/*Wrap the content of the divicon (text) in this class*/
.map-label-content {
  order: 1;
  position: relative; left: -50%;
  background-color: #fff;
  border-radius: 5px;
  border-width: 2px;
  border-style: solid;
  border-color: #444;
  padding: 0px;
  white-space: wrap;
}
/*Add this arrow*/
.map-label-arrow {
  order: 2;
  width: 0px; height: 0px; left: 50%;
  border-style: solid;
  border-color: #444 transparent transparent transparent;
  border-width: 10px 6px 0 6px; /*[first number is height, second/fourth are rigth/left width]*/
  margin-left: 14px;
}
/*Instance classes*/
.map-label.inactive {
  opacity: 0.9;
}

不添加带有传单地图和L.Routing.control的CSS的自定义标记

2 个答案: