Leaflet中bindPopup/on非函数问题：按ID显示悬浮弹窗失败排查

先直接说核心问题：你代码里的location变量是value.id，也就是字符串类型的ID（比如"room"、"floor"这类文本），但Leaflet的bindPopup()和on()方法是给地图图层对象（比如Marker、Polygon、GeoJSON图层这类Leaflet实例）设计的，普通字符串根本没有这些方法，这就是报错的根源。

正确的实现思路 #

你的locationCnfg.features应该是GeoJSON格式的要素集合，正确的做法是把每个GeoJSON要素转换成Leaflet的图层实例，再给图层绑定弹窗和交互事件：

修正后的代码示例 #

$scope.LocationCnfgCallBack = function(response) { 
  var locationCnfg = response.data.record; 
  $.each(locationCnfg.features, function(i, value){ 
    // 将GeoJSON要素转为Leaflet图层（自动匹配点/线/面类型）
    var layer = L.geoJSON(value).addTo(map);
    
    // 给图层绑定弹窗，这里可以用value.id展示对应的ID
    layer.bindPopup('这是ID为「' + value.id + '」的弹窗内容'); 
    
    // 绑定鼠标hover事件
    layer.on('mouseover', function(e) { 
      this.openPopup(); 
    }); 
    layer.on('mouseout', function(e) { 
      this.closePopup(); 
    });
  });
}

补充说明 #

1. 如果你的要素是固定类型（比如全是点要素），也可以直接创建对应图层：

   // 假设是点要素，从GeoJSON的coordinates提取坐标
   var marker = L.marker(value.geometry.coordinates).addTo(map);
   marker.bindPopup('当前ID：' + value.id);
   // 后续事件绑定逻辑和上面一致
   

2. 注意addTo(map)必须执行，不然图层不会显示在地图上，自然也没法触发交互事件。
3. 你原来的location.on写在循环外面，就算location是图层，也只会给最后一个要素绑定事件——事件绑定一定要放在循环内部，每个图层单独处理。

按照这个思路修改后，每个GeoJSON要素对应的Leaflet图层就能在鼠标hover时正常显示弹窗，不会再出现方法不存在的错误了。

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