leaflet.js中如何通过JS修改自定义标记.pin的background-color属性

原有代码失效原因 #

• 选择器格式错误：jQuery类选择器需要加.前缀，$("pin")无法匹配类名为pin的元素，正确写法为$(".pin")
• css方法传参格式错误：jQuery的css()方法支持两种传参格式，分别是css('属性名', '属性值')和css({'属性名': '属性值'})，你写的css("background:black")不符合参数要求
• 执行时机错误：Leaflet自定义图标内的DOM元素，只有在标记渲染到地图上时才会插入页面DOM树，提前执行选择器无法匹配到对应元素，自然不会生效

推荐实现方案 #

方案1：直接在HTML字符串内加内联样式（最简单，无依赖） #

直接在创建divIcon的HTML代码中给.pin元素加内联样式，内联样式优先级高于外部CSS，无需额外操作即可生效：

var client = L.divIcon({
    className: 'location-pin',          
    // 直接给pin元素加内联样式修改背景色，已修正原代码id属性缺失等于号的语法错误
    html: '<img id="operatorimg" src="img/test.jpg"><div class="pin" style="background-color: black;"></div>',
    iconSize: [30, 30],
    iconAnchor: [18, 30]
});

var marker = L.marker(new L.LatLng(a[0], a[1]), {
    icon: client,
    title: title
});
marker.bindPopup(title);
markers.addLayer(marker);

map.addLayer(markers);

方案2：动态修改已创建标记的背景色 #

如果需要在标记创建后动态修改颜色，可以监听标记的add事件，等元素挂载到DOM后再操作：

jQuery版本

var marker = L.marker(new L.LatLng(a[0], a[1]), {
    icon: client,
    title: title
});
marker.bindPopup(title);
markers.addLayer(marker);

// 监听标记挂载事件，修改当前标记内的pin元素样式，避免影响其他同类名元素
marker.on('add', function() {
    $(this.getElement()).find('.pin').css('background-color', 'black');
});

map.addLayer(markers);

原生JS版本（无需引入jQuery）

marker.on('add', function() {
    this.getElement().querySelector('.pin').style.backgroundColor = 'black';
});

内容的提问来源于stack exchange，提问作者KidfromCov